title: Creating a simple CSS grid
body: <p>I am creating a very simple template for my company that includes a simple grid system. I'm following this tutorial to create said system: <a href="http://css-tricks.com/dont-overthink-it-grids/" rel="nofollow">http://css-tricks.com/dont-overthink-it-grids/</a></p>
  
  <p>Well I've written some code, and modified it a little bit, and all of my columns are running together in the grid. I'm trying to add 20 pixels of padding to the left of each column, but it seems like that's not working. </p>
  
  <p>You can see a live version of my HTML and CSS here: <strong><a href="http://jsfiddle.net/EQ67e/" rel="nofollow">http://jsfiddle.net/EQ67e/</a></strong></p>
  
  <p>Here is my HTML code: </p>
  
  <pre><code>&lt;body class="container center"&gt;
      &lt;div class="grid"&gt;
          &lt;div class="col-1"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-3"&gt;&lt;/div&gt;
  
          &lt;div class="col-2-3"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-2"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-2"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-3"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-3"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-3"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-2"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-4"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-2"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  
      &lt;div class="grid"&gt;
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
  
          &lt;div class="col-1-8"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- .grid --&gt;
  &lt;/body&gt;&lt;!-- .container --&gt;
  </code></pre>
  
  <p>Here is the CSS: </p>
  
  <pre><code>@charset "UTF-8";
  
  /*
   * Global
   */
  html, html a { 
      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  
      font-smooth: always;
      -webkit-font-smoothing: antialiased;
  }
  
  body { 
      font-size: 1em;
  
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
  }
  
  .left { float: left; }
  
  .right { float: right; }
  
  .center { margin: 0 auto; }
  
  /* Typography */
  h1 { font-size: 2em; }
  
  h2 {    font-size: 1.75em; }
  
  h3 { font-size: 1.25em; }
  
  h4 { font-size: 1em; }
  
  ul { list-style: none; }
  
  ul li { display: inline; }
  
  img { border: none; }
  
  strong { font-weight: bold; }
  
  em { font-style: italic; }
  
  input { -webkit-appearance: none; }
  
  a:active, a:active *,
  a:focus, a:focus *,
  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
      outline: none;
      -moz-outline-style: none;
  }
  
  /* Selection Styles */
  *::selection {
      background: #666;
      color: #fff;
  }
  
  *::-moz-selection {
      background: #666;
      color: #fff;
  }
  
  *::-webkit-selection {
      background: #666;
      color: #fff;
  }
  
  /* Grid */
  *, *:after, *:before {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }
  
  .grid { 
      background: #ccc;
      margin: 0 0 20px -20px; 
  }
  
  .grid:after {
      clear: both;
      content: "";
      display: table;
  }
  
  /* Grid Gutters */
  [class*='col-'] {
      background: red;
      float: left;
      height: 25px;
      padding-left: 20px;
  }
  
  .grid-pad { padding: 20px 0 20px 20px; }
  
  .grid-pad [class*='col-']:last-of-type { padding-right: 20px; }
  
  /* Grid Columns */
  .col-1 { width: 100%; }
  
  .col-2-3 { width: 66.66%; }
  
  .col-1-2 { width: 50%; }
  
  .col-1-3 { width: 33.33%; }
  
  .col-1-4 { width: 25%; }
  
  .col-1-8 { width: 12.5%; }
  </code></pre>
  
  <p>Does anyone have any idea where I might be going wrong? I think it may be something super super simple, but I feel like I followed that tutorial properly. </p>
  
  <p>I appreciate any and all help from you folks, thanks for taking the time to read this and respond. </p>