title: nth-child "collisions" in a responsive design / creating a fluid grid
body: <p>I have a grid system for my site which was initially set up with a style applied to every sixth item in a grid</p>
  
  <pre><code>li:nth-child(5n+1){ margin-left:0 }
  </code></pre>
  
  <p>I'm in the process of making my site responsive, and I have a breakpoint where I specify</p>
  
  <pre><code>li:nth-child(3n+1){ margin-left:0 }
  </code></pre>
  
  <p>But the problem is that it is still interpreting the previous style of 5n+1, which I don't want. How do I tell CSS to ignore that style. Or better yet, how do I create a fluid grid so that whenever an li item is the first in a row, it has a margin-left of 0, and all others have a margin of, say, 25px?</p>