I'm trying to remove some white space on the left of a fixed top menu ul
but I'm stuck, I already searched and put this:
#nav li {
list-style: none;
display: inline-block;
}
I want to put all the list at the left (like left: 0
?), but something is producing some white space on the left of the first list item.
Why is this happening, and how can I remove it?
Here is the code (fiddle):
#contenedormenu {
background-color: #FFFFFF;
width: 100%;
position: fixed;
top: 0px;
box-shadow: 0px 1px 2px #888;
height: 40px;
z-index: 1;
}
#menu {
width: 100%;
height: 40px;
position: fixed;
top: 0px;
}
#nav {
width: 100%;
height: 40px;
top: 0px;
position: fixed;
margin-top: 0px;
}
#nav li {
margin-top: 10px;
list-style: none;
display: inline-block;
}
#nav li a {
color: #5D5D5D;
font-family: Lobster, Arial, sans-serif;
font-size: 16px;
padding: 10px 5px 12px 5px;
text-decoration: none;
text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0;
}
#nav a:hover {
background-color: #f15a24;
color: white;
text-shadow: none;
}
<div id="contenedormenu">
<div id="menu">
<ul id="nav">
<li id="inicio">
<a href="#home" title="Home">Home</a>
</li>
<li id="item1">
<a href="#home">Menu item 2</a>
</li>
<li id="item2">
<a href="#home">Menu Item 3</a>
</li>
</ul>
</div>
</div>