title: Flex grid with odd numbers of items and fixed margin between
body: <p>Ok this is giving me quite an headache...</p>
  
  <p>this is my code/example</p>
  
  <p><a href="https://codepen.io/anon/pen/xXpjYa" rel="nofollow noreferrer">https://codepen.io/anon/pen/xXpjYa</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex {
    display: flex;
    flex-wrap: wrap;
  }
  
  .imageContainer {
    flex: 1 0 30%;
    height: 200px;
    border: 5px solid black;
    background-color: deeppink;
    margin:15px;
  }
  
  .imageContainer:empty {
      height: 0;
      border: none;
  };
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
      &lt;div class="imageContainer"&gt;a&lt;/div&gt;
      &lt;div class="imageContainer"&gt;a&lt;/div&gt;
      &lt;div class="imageContainer"&gt;a&lt;/div&gt;
      &lt;div class="imageContainer"&gt;a&lt;/div&gt;
      &lt;div class="imageContainer"&gt;&lt;/div&gt; 
      &lt;div class="imageContainer"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the problem is that I want to achieve/fix two things:</p>
  
  <ul>
  <li>the far left and far right column should be touching the edge of the viewport</li>
  <li>the fixed gap should be 30px and only the pink boxes stretch responsively</li>
  <li>notice the last item (5) is slightly wider than the others...why??</li>
  </ul>
  
  <p>please help! thanks!</p>