Inline Block Elements Overflowing Parent Container - html

Question

I have a list of 4 menu items sitting side by side using display:inline-block;. Each item is 120px, therefore I should be able to set the parent container to be 480px wide, however this sends the last item into the next row, why is this ??
Here is a jsfiddle :http://jsfiddle.net/htdgdhxn/
My html:
<section id="nav">
<div id="nav-wrapper">
<ul id="nav-list">
<li id="nav-home">Home
</li>
<li id="nav-clothes"><a class="category All">Clothes</a>
</li>
<li id="nav-about">About Us
</li>
<li id="nav-contact">Contact Us
</li>
</ul>
</div>
</section>
CSS:
* { margin: 0px; padding: 0px; }
#nav { background-color: #fff; }
#nav-wrapper { text-align: center; height: 74px; }
#nav-list { height: 100%; width: 480px; }
#nav-list li { display: inline-block; vertical-align: top; width: 120px; height: 100%; }
#nav-list li a { text-decoration: none; color: #000; font-size: 1.6em; display: block; height: 100%; line-height: 74px; }
#nav-list li a:hover { background-color: #F0ECE1; cursor: pointer; }
I have tested and this happens in Chrome, IE and Firefox.

Answer 1

Remove the whitespace between each <li>
<li></li> <...space here...> <li></li>
Inline block elements create a gap between li elements.
<ul id="nav-list">
<li id="nav-home">Home
</li><li id="nav-clothes"><a class="category All">Clothes</a>
</li><li id="nav-about">About Us
</li><li id="nav-contact">Contact Us
</li>
</ul>
See fiddle

Answer 2

The inline-block value is incredibly useful when wanting to control margin and padding on
"inline" elements without the need to block and float them.One problem that arrises
when you use inline-block is that whitespace in HTML becomes visual space on screen.
Gross.There are a few ways to remove that space; some of them are just as gross, one is
reasonably nicer.
Solution 0: No Space Between Elements:
The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
Solution 1: font-size: 0 on Parent
The best white-space solution is to set a font-size of 0 on the parent to the inline block
elements.
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}
Solution 2: HTML Comments
This solution is a bit gangsta but also works. Using HTML comments as spacers between the elements works just as placing no space between elements would:
<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
It might help you.

Answer 3

Just increase the width of your container to 500px
#nav-list { height: 100%; width: 500px; }
or remove the white spaces between consecutive li tags
or
apply display:initial in #nav-list { height: 100%; width: 480px;}
i.e #nav-list { height: 100%; width: 480px; display: initial;}

Answer 4

Reason:-
1. The font size of the text in the li element might be causing the problem.
You can modify it by reducing the font-size.
#nav-list li a { text-decoration: none; color: #000; font-size: 1.2em; display: block; height: 100%;line-height: 74px; }
Instead of using this
#nav-list li { display: inline-block; }
You can do like this:-
#nav-list li { display: inline; font-weight:bold;}
Please let me know if this helps.