title: How to offset div columns in CSS grid system
body: <p>Does anyone know to offset the first two <code>div</code>s that are in side row that have the class <code>col-3-12</code> to have an offset of <code>offset-6-12</code> and <code>offset-9-12</code> to be on the right side of my grid system <a href="http://jsfiddle.net/c6R6t/" rel="nofollow">jsFiddle</a></p>
  
  <p><strong>CSS:</strong> </p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      font:20px/1.2 Verdana, Arial; padding:0px; margin:0px;
  }
  *, *:after, *:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing:border-box;
  }
  .container {
      padding: 20px 20px 0 20px; background-color: red
  }
  .row {
      padding: 0;
      *zoom: 1;
  }
  .row:after, .row:before {
      content: ' ';
      display: table;
  }
  .row:after {
      clear: both;
  }
  .row &gt; [class*='col-']:first-child {
      margin-left: 0;
  }
  .row &gt; [class*='col-']:last-child {
      margin-right: 0;
  }
  .row &gt; [class*='col-'] {
      /* edit here*/
      margin:0px 10px 20px 10px 
  }
  [class*="col-"] {
      float:left; 
      height:300px;
      background-color: #dedede;
      border: 1px solid #000;
  
  }
  [class*=col-]:last-of-type {
  
  }
  .col-1-12 {
      width: calc((100% - (12/1 - 1) * 20px) / 12 * 1);
  
  }
  .col-2-12 {
      width: calc((100% - (12/2 - 1) * 20px) / 12 * 2);
  }
  .col-3-12 {
      width:  calc((100% - (12/3 - 1) * 20px) / 12 * 3);  
  }
  .col-4-12 {
      width: calc((100% - (12/4 - 1) * 20px) / 12 * 4);
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
          &lt;div class="col-3-12 offset-6-12"&gt;
              Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          &lt;/div&gt;  
          &lt;div class="col-3-12 offse-9-12"&gt;
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-3-12"&gt;
              Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          &lt;/div&gt;  
          &lt;div class="col-3-12"&gt;
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          &lt;/div&gt;
          &lt;div class="col-4-12"&gt;
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          &lt;/div&gt;
          &lt;div class="col-2-12"&gt;
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          &lt;/div&gt;      
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>