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

Question

我有一个媒体查询，使我的导航栏按钮在小屏幕上垂直，但是当这种情况发生时，每个按钮的左侧有空白，我不知道为什么，因为在我的代码中没有左边距。提前感谢任何可以摆脱这个的人。

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

默认的UL元素从左边取一些padding。你需要添加下面的css来解决这个问题:

#navbar {
    padding: 0px;
}