On smaller screens, I updated my navbar buttons to be vertical using a media query. However, I encountered an issue where there is blank space to the left of each button despite not having a left margin in my code. Any help on how to resolve this would be greatly appreciated.
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>