title: How to get rid of unwanted space between inline-block columns?
body: <p>I'm attempting to use a css grid with widths set in % (so I can use it responsively) and without using floats (personal dislike!). </p>
  
  <p>In this instance, I'm using <a href="https://github.com/csswizardry/csswizardry-grids" rel="nofollow">csswizardry-grids</a> with the appropriate variables added in. You can view the demo linked on the github page.</p>
  
  <p>There is no mention of a "container" class to assign a width to the grid, so I added .container (which is also what the csswizardry-grids demo has) with a max-width (in prep for other breakpoints later). The container has left and right padding to allow for the padding:left on the .grid__item within.</p>
  
  <pre><code>.container {
      margin: 0 auto;
      padding: 0 $gutter;
      max-width: 960px;
  }
  </code></pre>
  
  <p>The scss:</p>
  
  <pre><code>.grid__item {
      display: inline-block;
      padding-left: 32px;
      vertical-align: top;
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .desk--one-third { width: 33.333%; }
  </code></pre>
  
  <p>Also note that the box-sizing:border-box is not on any other element except that which is spec'd by the csswizardry-grids.scss.</p>
  
  <p>My markup: </p>
  
  <pre><code>&lt;div class="container"&gt; 
      &lt;div class="grid"&gt;
          &lt;div class="grid__item desk--one-third"&gt;
              &lt;h1&gt;Column 1&lt;/h1&gt; 
          &lt;/div&gt;
          &lt;div class="grid__item desk--one-third"&gt;
              &lt;h1&gt;Column 2&lt;/h1&gt; 
          &lt;/div&gt;
          &lt;div class="grid__item desk--one-third"&gt;
              &lt;h1&gt;Column 3&lt;/h1&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;      
  </code></pre>
  
  <p>The problem: in firefox, safari &amp; chrome, the last .grid__item falls away. </p>
  
  <p>What I see: a mysterious gap between '.grid__item's of at least a few pixels. See attached screenshot:</p>
  
  <p>!(<a href="http://dl.getdropbox.com/u/7408773/Screen%20Shot%202013-05-10%20at%2012.51.06%20AM.png" rel="nofollow">http://dl.getdropbox.com/u/7408773/Screen%20Shot%202013-05-10%20at%2012.51.06%20AM.png</a>)</p>
  
  <p>Can anyone shed some light on this for me please?</p>