title: Equal spacing of 3 divs inside of container
body: <p>The container is 1200px, each div is only 292px wide. Ideally div 1 would sit on the left margin, div 3 would sit on the right margin and div 2 would sit right in the middle of them. To further complicate things, when viewed on mobile the container will be reduced to 320px and all 3 divs should be in line with each other vertically, underneath each other. At the moment the css to each div looks like this:</p>
  
  <pre><code>.test1 {
  float:left;
  width:292px;
  background-color:#F2F2F2;
  margin:0 4px 5px;
  border:1px solid grey;
  line-height:0;
  }
  </code></pre>