title: Inline Block Elements Overflowing Parent Container
body: <p>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 ??</p>
  
  <p>Here is a jsfiddle :<a href="http://jsfiddle.net/htdgdhxn/" rel="nofollow">http://jsfiddle.net/htdgdhxn/</a></p>
  
  <p>My html:</p>
  
  <pre><code>&lt;section id="nav"&gt;
  
      &lt;div id="nav-wrapper"&gt;
  
          &lt;ul id="nav-list"&gt;
              &lt;li id="nav-home"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="nav-clothes"&gt;&lt;a class="category All"&gt;Clothes&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="nav-about"&gt;&lt;a href="aboutus.php"&gt;About Us&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="nav-contact"&gt;&lt;a href="contactus.php"&gt;Contact Us&lt;/a&gt;
              &lt;/li&gt;                                                                           
          &lt;/ul&gt;           
  
      &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* { 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; }
  </code></pre>
  
  <p>I have tested and this happens in Chrome, IE and Firefox.</p>