title: ONLY Firefox behaves weird with inline-block element
body: <p>I was playing with responsive css grids recently so I tried to make one of my own for new project. I decided to keep it fairly simple so I used <code>display:inline-block</code> property for my cells.</p>
  <p>This would either require <code>margin:-0.25em</code> &quot;hack&quot; or removal of spaces between <code>inline-block</code> elements to counter last element skipping to a new line.</p>
  <p>I decided for removal of white space between columns. It works excellent even in IE8, but for some reason latest Firefox acts as if there's white space in between.</p>
  <p>Only explanation I can think of right now is that Firefox re-formats HTML code before rendering it and in that process adds <code>new line</code> after each <code>&lt;/div&gt;</code> closing tag.</p>
  <p><strong>Here's my <a href="http://jsfiddle.net/Jinx/EcPA7/" rel="noreferrer">JS Fiddle</a></strong></p>
  <p>Thanks in advance!</p>
  <p><strong>[ANSWER]</strong>
  I have forgot to put firefox prefix for <code>box-sizing</code>, and padding that served as spacing between columns made excess content because of that.</p>
  <p>it's fixed by adding : <code>-moz-box-sizing: border-box;</code> to <code>col</code> elements.</p>