title: Best way to keep equal margins CSS
body: <p>I'm working on a responsive grid and I'm trying to keep the margins the same on all four sides of the <strong>main div</strong> at each resolution. I've put margin 0 auto on the main div which keeps it equal on the right and the left but what about the top and bottom? </p>
  
  <pre><code>&lt;div id = "wrapper"&gt;
  &lt;header id = "header"&gt; &lt;p&gt; this is the header&lt;/p&gt;&lt;/header&gt;
  &lt;div id = "main"&gt;
      &lt;div id = "" class = "col col3"&gt;
          &lt;div class = "img-col"&gt;&lt;img src = "images/image.png"&gt;&lt;/div&gt;
          &lt;div class = "text-col"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero. Fusce id semper orci. Morbi      imperdiet sit amet elit vel consectetur. Nam suscipit sem blandit est consectetur iaculis. Vestibulum sed dolor elementum, viverra sapien id, sollicitudin nibh. Integer quis venenatis ligula.Nam suscipit sem blandit est consectetur iaculis.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id = "" class = "col col1"&gt;
          &lt;div class = "img-col"&gt;&lt;img src = "images/image.png"&gt;&lt;/div&gt;
          &lt;div class = "text-col"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero. Fusce id semper orci. Morbi imperdiet sit amet elit vel consectetur. Nam suscipit sem blandit est consectetur iaculis.&lt;/p&gt; 
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero.Lorem ipsum dolor sit amet,. &lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>#main { 
      width:90%;
      margin:0 auto;
  }
  
  .col { 
      float:left;
      margin: 1% 0px 1% 1.6%;
      background-color:#FF0000;   
  }
  </code></pre>