CSS menu background - html

Question

any ide what is it? The white box between two menu item.(circled with red)
CSS:
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 50px;
}
#navigation a {
text-decoration: none;
display: inline-block;
padding-bottom: 15px;
color: #383838;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#navigation a:hover {
color: #6A98DD;
}
#navigation li {
display: inline-block;
padding-left: 9px;
padding-right: 10px;
color: #383838;
background: #EEE;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.6s;
webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-ms-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
#navigation li:hover {
padding-left: 8px;
color: #6A98DD;
display: inline-block;
background: #EEE;
border-left: 1px solid #AAA;
}

Answer 1

It is because your li are set todisplay: inline-block; - inline elements are effectively treated like textual nodes, so if each li is on a newline in your HTML this is interpreted as a space.
There are a number of ways to prevent this- one is to set font-size:0; on your ul then font-size:14px; on your li
Alternatively, you can float:left your li and set overflow:hidden on your ul
Or, you can remove the newline in your HTML- putting all your li on a single line.
See here for some other techniques and information, and here

Answer 2

Inline block display mode is the culprit.
#navigation li {
display: inline-block;
...
}
Instead, you can make this way, with the above code, add this in the end:
#navigation {
overflow: hidden;
}
#navigation li {
float: left;
}

Answer 3

Float your li's left like so;
#navigation li {
float: left;
}

Answer 4

the solution is:
Set float left on elements. Or...
Set font-size: 0 on parent and reset font size on children font-size: 1.
That happens becouse of white space between elements. another solution is to use some syntax that prevents spaces, like so:
<div id="navigation">
<li>Item 01</li><li>
Item 02</li><li>
Item 03</li><li>
Item 04</li><li>
Item 05</li>
</div>
Here an example:
1) set float left on childern: http://jsfiddle.net/27t5ogsj/2/
2) font-size method (simply css): http://jsfiddle.net/27t5ogsj/
3) html pre-format method: http://jsfiddle.net/27t5ogsj/1/
Personally i like the second method becouse then i can center horizontally the menu with an simple text-align: center on parent! http://jsfiddle.net/27t5ogsj/3/