title: nth-child not working properly, sometimes count is wrong
body: <p>I have problem with :nth-child pseudoclass. As in the topic, in some cases it counts wrong or it's something with the media queries.
  I want my modal to stick to the left side and I can't give it position absolute...
  Code below is a part of the fiddle (<a href="http://jsfiddle.net/WThuW/3/" rel="nofollow">http://jsfiddle.net/WThuW/3/</a>)</p>
  
  <pre><code>@media (min-width: 500px) and (max-width: 599px) {
  .box {
      width: 33.333333333331%;
  }
  .content .box:nth-child(2) .all-box-info,
  .content .box:nth-child(2n+3) .all-box-info {
      margin-left: -100%;
  }
  .content .box:nth-child(3) .all-box-info,
  .content .box:nth-child(3n+3) .all-box-info {
      margin-left: -200%;
  }
  .content .box:nth-child(10) .all-box-info {
      margin-left: 0;
  }
  }
  </code></pre>
  
  <p>Check the JSFiffle > <a href="http://jsfiddle.net/WThuW/2/" rel="nofollow">http://jsfiddle.net/WThuW/2/</a></p>
  
  <p>Note that there are media queries! When 2 boxes in row everything is ok. With 3 and more there is a problem in at least one of the modals.</p>
  
  <p>Hope somebody know what to do!</p>