Menu items have a wierd few pixels spacing between eachother - html

Question

For some reason my menu items keep having some spacing left and right between the menu items..! While I'm kind of sure I havent programmed this..?
Anyone know why there is like 3 pixels spacing between my menu items?
http://jsfiddle.net/skunheal/ceFSJ/
HTML:
<div id="menu">
<ul id="nav">
<li class="page_item page-item-13">
Contact
</li>
<li class="page_item page-item-5 current_page_item">
Home
</li>
<li class="page_item page-item-7">
Nieuws
</li>
</ul>
</div>
CSS:
#nav, #subNav {
list-style: none;
padding-left: 0px;
margin: 0px;
}
#nav li, #subNav li {
display: inline;
padding:0px;
}
/* Currently selected page nav item (and parent) if applicable */
.current_page_item a,
.current_page_parent a {
text-decoration: none;
font-family:futura;;
color:#CCC;
}
.page_item a{
text-decoration: none;
font-family:futura;;
color:#FFFFFF;
display:inline-block;
background:#00C;
line-height:30px;
width:120px;
height:30px;
}
#menu{
height:30px;
text-align:center;
}
Thanx in advance,
Greetings,
Merijn!

Answer 1

You've set the display of lis to inline. So, the spaces between your li tags (the line-breaks and indentions) behave like spaces between words. Just remove the spaces and make it like this:
<div id="menu">
<ul id="nav">
<li class="page_item page-item-13">Contact</li><li class="page_item page-item-5 current_page_item">Home</li><li class="page_item page-item-7">Nieuws</li>
</ul>
</div>
You can also fix it with setting font size of ul to zero and setting it again on lis.

Answer 2

Try removing all the white space from between the <ul> and <li> items.
Either have them in a single line, or split over the lines like this...
<ul id="nav"><li class="page_item page-item-13">Contact</li
><li class="page_item page-item-5 current_page_item">Home</li
><li class="page_item page-item-7">Nieuws</li
></ul>
Update
Based on your JSFiddle... here is the same fiddle with the white space removed