每個導航欄按鈕左側的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; 
}