title: first-child selector not working
body: <p>I am trying to build a simple box system and I need to remove the right margin of the first child. </p>
  
  <p>I have tried both <strong>first-child</strong> and <strong>first-of-type</strong> and still cannot properly target the intended class. </p>
  
  <p>I have read through a number of different examples and still cannot find a solution. </p>
  
  <p><strong>Please see this <a href="http://jsfiddle.net/drewgood/Lvd44upd/1/">fiddle</a> and help me remove the margin-left from the first child.</strong></p>
  
  <pre><code>.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: black;
  }
  
  .box {
    margin: 1% 0 1% 0;
    float: left;
    background-color: gray;
    box-sizing: border-box;
    color:white;
  }
  .box.full {
    width: 100%;
    margin-left: 0;
  }
  
  .box.half {
    width: 49%;
    margin-left: 1%;
  }
  
  .half:first-child {
    margin-left: 0;
  }
  </code></pre>