title: Boostrap ish CSS not working as expected
body: <p>So, I had to develop a website with columns but I was not allowed to use bootstrap. So I decided to borrow some stuff from their grid to help me.</p>
  
  <p>I created my code like this:</p>
  
  <pre><code>.container {
      width: 970px;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
  }
  
  .container:before, .container:after {
      display: table;
      content: " ";
  }
  
  .container:after {
      clear: both;
  }
  
  .container .row {
      margin-right: -15px;
      margin-left: -15px;
  }
  
  .container .row:before, .container .row:after {
      display: table;
      content: " ";
  }
  
  .container .row:after {
      clear: both;
  }
  
  .container .row .col-1, .container .row .col-2, .container .row .col-3, .container .row .col-4, .container .row .col-5, .container .row .col-6, .container .row .col-7, .container .row .col-8, .container .row .col-9, .container .row .col-10, .container .row .col-11, .container .row .col-12 {
      float: left;
      position: relative;
      min-height: 1px;
      /*padding-right: 15px;
      padding-left: 15px;*/
  }
  
  .container .row .col-12 {
      width: 100%;
  }
  
  .container .row .col-11 {
      width: 91.66667%;
  }
  
  .container .row .col-10 {
      width: 83.33333%;
  }
  
  .container .row .col-9 {
      width: 75%;
  }
  
  .container .row .col-8 {
      width: 66.66667%;
  }
  
  .container .row .col-7 {
      width: 58.33333%;
  }
  
  .container .row .col-6 {
      width: 50%;
  }
  
  .container .row .col-5 {
      width: 41.66667%;
  }
  
  .container .row .col-4 {
      width: 33.33333%;
  }
  
  .container .row .col-3 {
      width: 25%;
  }
  
  .container .row .col-2 {
      width: 16.66667%;
  }
  
  .container .row .col-1 {
      width: 8.33333%;
  }
  </code></pre>
  
  <p>The problem is that this has no padding between columns as it does on bootstrap. If I try to add the padding my columns wrap onto two lines.
  Without the padding, it works fine. </p>
  
  <p>I created a <a href="http://jsfiddle.net/987u646s/" rel="nofollow">jsfiddle here to show without padding</a></p>
  
  <p>now with -margin on the row I expected to be able to add padding on the columns and it work, but <a href="http://jsfiddle.net/987u646s/1/" rel="nofollow">as you can see from this jsfiddle</a>, it wraps onto two lines...</p>
  
  <p>Does anyone know why?</p>