title: Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
body: <p>I want to create a grid of <em>responsive</em> 4x4 squares with a margin of exactly 20px on the left and right sides of the overall container. Furthermore, this would effectively eliminate the <em>left margin</em> on the first squares in each row and also eliminate the <em>right margin</em> on the last squares in each row since double margins aren't needed.</p>
  
  <blockquote>
    <p><em>The green color notes the 20px margins on each side.</em></p>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/tYTMt.jpg" alt="enter image description here"></p>
  
  <p>I've so far created the grid of squares with percentages but the problem is that, since I am applying a margin to all sides of each square, this method does not guarantee a left and right margin (on the container) of 20px each.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/p9qdhfub/1/" rel="nofollow noreferrer">http://jsfiddle.net/p9qdhfub/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
      background: #000;
      float: left;
      height: 24vw;
      margin: 1%;
      width: 23%;
  }
  </code></pre>
  
  <h2>Question</h2>
  
  <p>How would I be able to create a 4x4 responsive grid of squares with the container (i.e. <code>section</code>) always having a <code>margin-left</code> of 20px and a <code>margin-right</code> of 20px?</p>