Styling Full Hover Effect

Question

I want a css hover effect to last on all sections of a particular list item but it seems like there is added margins on the bottom and left and right of the list item that I can't seem to get rid off. I know this is probably a pretty basic css question but I have a JSFiddle here: http://jsfiddle.net/y2497/

I was using bootstrap to get my base css but I don't think that is affecting it.

My Code is:

#navbar {
    padding-bottom: 0px;
    margin-bottom: 0px; 
}

#nav_container li {
    list-style-type: none;
    display: inline-block;
    margin: 0px 20px 0px 20px;
}

#nav_container li:hover {
    background: #333;   
}

#nav_container li a {
    display: inline-block;
    color: #00;
    padding: 10px;
}

<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div id="nav_container"> 
    <ul>
      <li><a href="#top">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 1

You are using inline-block on your li tags. What you need to do is apply float:left; and display:block; . Then apply a clearfix to the UL. Inline-block treats elements similar to how text is handled and includes line-height and spaces.