title: Four Columns Equal Width, 0 Outer Margin, Equal Inner Margin
body: <p>This is a spin off <a href="https://stackoverflow.com/questions/32786138/display-table-cell-remove-right-and-left-border-space">Display Table-Cell: Remove Right and Left Border Space?</a>.</p>
  
  <p>I was trying to create a solution using divs and inner margins of equal width but I get unwanted spacing in between causing my last div to wrap.</p>
  
  <p><a href="https://jsfiddle.net/kyy7qgLz/1/" rel="nofollow noreferrer">https://jsfiddle.net/kyy7qgLz/1/</a></p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
      border: 0;
  }
  #container {
      width: 100%;
      background-color: blue;
  }
  .item {
      margin-left: 4%;
      width: 22%;
      display: inline-block;
      background-color: red;
  }
  .item:first-of-type {
      margin-left: 0%;
  }
  
  &lt;div id="container"&gt;
      &lt;div class="item"&gt;
          Text 1
      &lt;/div&gt;
      &lt;div class="item"&gt;
          Text 2
      &lt;/div&gt;
      &lt;div class="item"&gt;
          Text 3
      &lt;/div&gt;
      &lt;div class="item"&gt;
          Text 4
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where is the extra spacing coming from and how do I get rid of it?</p>