每个导航栏按钮左侧的CSS空白空间

Question

我有一个媒体查询使我的导航栏按钮在小屏幕上垂直，但发生这种情况时there is blank space to the left of each button，我不知道为什么，因为我的代码中没有左边距。在此先感谢任何能够摆脱这种情况的人。

CSS：

/* Navbar */ 
#navbar { 
    background-color: #599; 
    list-style-type: none; 
    overflow: hidden; 
    margin: 0px; 
    width: auto; 
    text-align: centre; 
    font-family: 'corbel','arial'; 
    text-align: center; 
} 

#nav_li { 
    float: left; 
    display: inline; 
    text-align: center; 
} 

#nav_a { 
    text-decoration: none; 
    margin: 10px; 
    display: inline-block; 
    color: white; 
} 



/* Media queries for smaller screens*/ 
@media screen and (max-width : 350px){ 

    /* reduce padding */ 
    header nav a{padding:.7em .7em; } 
    [role=main]{padding:1.5em 1.5em;} 

    /* make navbar vertical */ 
    #nav_li{text-align: center; 
      border-bottom: 1px solid #eee;} 
    #nav_li, #navbar_a{width: 100%;} 

HTML：

<ul id='navbar'> 
    <li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li> 
    <li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li> 
    <li id='nav_li'><a id='nav_a' href='testimonials.html'>Testimonials</a></li> 
    <li id='nav_li'><a id='nav_a' href='contact.html'>Contact </a></li> 
</ul> 

Answer 1

默认UI元素采取一些填充左。您需要添加以下css来解决此问题：

#navbar { 
    padding: 0px; 
}