title: 3 column with equal margin
body: <p><a href="https://jsfiddle.net/zfacazy0/" rel="nofollow">https://jsfiddle.net/zfacazy0/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    width:200px;
    background:blue;
    display:block;
    overflow:hidden;
  }
  
  .col{
    width:30%;
    margin-right:5px;
    background:red;
    float:left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
  &lt;div class="col"&gt;1&lt;/div&gt;
  &lt;div class="col"&gt;2&lt;/div&gt;
  &lt;div class="col" style="margin-right:0"&gt;3&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>if I put 33% and the margin is too much it will not have single row. Either I adjust margin or width, I just can't do a proper 3 column with equal margin and width. Need help.</p>