Charley Charley - 11 months ago 54
CSS Question

CSS empty space to the left of each navbar button

I have a media query to make my navbar buttons vertical on small screens, but when this happens there is blank space to the left of each button and I don't know why, as there is no left margin in my code. Thanks in advance to anyone who can get rid of this.


/* 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%;}


<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>

Answer Source

By Default UL Element Take some padding from left. You need to add below css to resolve this:

#navbar {
    padding: 0px;