Any particular reason for making them inline-block and not just block? Either way, giving them float:left; will probably help.

This is one option you have to fix the problem:

#menu {
    font-size: 0;
}
#menu a {
    font-size: 13px;
}

As you are using inline-block, the browser treats each inline block element as though it where a character in a sentence, giving it a little bit of space. The above trick removes that space so that inline-block elements sit right up against one another.

@TheDoc Do you find that using that technique is blurring the lines between content and style? For me, I would rather not have to alter my markup so that a CSS technique works. Either way, it is a valid solution, I'm just interested in your thoughts on the matter!

With that being said, another, perhaps more readable option (valid in HTML5) is this:

<ul id="menu">
    <li><a href="index.html">Home</a>
    <li><a href="about.html">About</a>
    <li><a href="forums.html">Forums</a>
    <li><a href="how-to-join.html">How to join</a>
    <li><a href="logout.html">Log out</a>
</ul>​

P.S. Can we just have a decent layout model that is widely supported already…

Thank you! It works just fine now, thanks again! :)

@joshuanhibbert something about doing font-size: 0; just doesn't sit right with me. I get that it works, I just don't think it makes sense when somebody is reading code.

Either way, I updated a lot of the markup to remove the divs and spans that were in there.

you could always use floats ;)
j/k

@wolfcry911 I still do at times :)