title: CSS Inline-block rounding error?
body: <p>This isn't the traditional where is the whitespace coming from question, but rather where is this extra pixel coming from and how can I stop it?</p>
  
  <p>The code below produces a container that is a third of the available width, within it there is a list split into 3 , the list has the width set to 100% as do the children, the children are inline-blocks all stacked next to each other and only the first is show (due to overflow on the container).</p>
  
  <p>The issue is that at varying screen widths one of the list elements becomes a pixel smaller/larger than the other two? I can't get my head around this as they are supposed to be expanding to the width of their parent - which is the same for all three list items.</p>
  
  <p>Is this an issue with my approach or a bug, is there a fix?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul class="list"&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
      display:block;
      width:33.333%;
  }
  
  .list {
      width:100%;
      list-style:none;
      padding:0;
      margin:0;
      font-size:0;
      white-space:nowrap;
  }
  
  .list li {
      display:inline-block;
      vertical-align:top;
      width:100%;
      height:300px;
      background:blue;
      border: 1px dashed yellow;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/e6z218n7/" rel="nofollow">http://jsfiddle.net/e6z218n7/</a></p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>Just to add my thinking/expections;</p>
  
  <ul>
  <li>Say the body of the page is 821px,</li>
  <li>The .container element at 33.333% should come about at 274px or 273px depending on how the browser rounds,</li>
  <li>In either of these cases I'd expect each of the li's to come out at the same width as their parent as they have width:100% so each li should also be 274px or 273px (depending on which the parent is) which should only be relative to their parent right?</li>
  </ul>
  
  <p>Of course this is not what I'm getting, and I'm not understanding why?</p>