title: CSS 33.3333% leaves a pixel
body: <p>Frustrating problem, I have a div with 3 other div's inside that each should be 33% (one third). The problem is that i always have an extra pixel.</p>
  <h2>I tried the following.</h2>
  <ul>
  <li>33.333333333%</li>
  <li>33.3334%</li>
  <li>calc (100% / 3)</li>
  </ul>
  <p>This is an image showing the problem</p>
  <p><img src="https://i.stack.imgur.com/748AR.jpg" alt="enter image description here" /></p>
  <p>This is my HTML</p>
  <pre><code>&lt;div class=&quot;navigation&quot;&gt;
  
      &lt;div class=&quot;navigation-item&quot;&gt;
          &lt;div class=&quot;navigation-item-inner&quot;&gt;
              &lt;img src=&quot;http://placekitten.com/50/50&quot;&gt;
              &lt;h5&gt;Running&lt;/h5&gt;
              Whatever fits your need
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;navigation-item&quot;&gt;
          &lt;div class=&quot;navigation-item-inner&quot;&gt;
              &lt;img src=&quot;http://placekitten.com/50/50&quot;&gt;
              &lt;h5&gt;Running&lt;/h5&gt;
              Whatever fits your need
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;navigation-item&quot;&gt;
          &lt;div class=&quot;navigation-item-inner&quot;&gt;
              &lt;img src=&quot;http://placekitten.com/50/50&quot;&gt;
              &lt;h5&gt;Running&lt;/h5&gt;
              Whatever fits your need
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>This is my CSS</p>
  <pre><code>.navigation
  {
      float: right;
      width: 30%;
      height: 100%;
  }
  
  .navigation-item
  {
      display: table;
      width: 100%;
      height: 33.3333%;
      padding-left: 20px;
  }
      
  .navigation-item-inner
  {
      display: table-cell;
      vertical-align: middle;
  }
  </code></pre>
  <h2>Edit</h2>
  <p>Thanks for the fiddle, I updated it to match the problem</p>
  <p>Fiddle link: <a href="http://jsfiddle.net/h8p4A/3/" rel="nofollow noreferrer">http://jsfiddle.net/h8p4A/3/</a></p>