Create a 4x4 sensitive grid of squares with a margin of 20 pixels on each side of the container?

Question

I want to create a grid of sensitive 4x4 squares with an edge of exactly 20 pixels on the left and right sides of the container. In addition, this will effectively eliminate the left margin on the first squares in each row, and also eliminate the right margin on the last squares in each row, since double margins are not needed.

Green indicates 20px margins on each side.

I have so far created a grid of squares with percentages, but the problem is that since I apply margin to all sides of each square, this method does not guarantee the left and right edges (on the container) of 20px each.

Fiddle: http://jsfiddle.net/p9qdhfub/1/

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23%;
}

Question

4x4 (.. section), margin-left 20px a margin-right 20px?

Answer 1

section{
    margin:-1%;
    padding:20px;
}

DEMO

, 20px . , overflow:hidden;

DEMO

html,
body {
  margin: 0;
}
.w {
  overflow: hidden;
}
section {
  margin: -1%;
  padding: 20px;
}
section div {
  background: #000;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
}

<div class="w">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

Hide result

Answer 2

jsfiddle demo

20px margin,
(+4) DIV 0,
DIV 0;

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23.5%;
}
div:nth-child(4n-3){
    background:red;
    margin-left:0; /* or use 20px */
}
div:nth-child(4n){
    background:blue;
    margin-right:0; /* or use 20px */
}
section{
    margin:0 20px; /* so you don't need this any more */
}

Answer 3

? /