title: nth-child not working for my <li> tags
body: <p>thanks for reading! Having some issues today with the nth-child selector...
  Here's the HTML code, followed by the CSS...</p>
  
  <p>The below is basically just a &lt; ul > &lt; li > thats repeated 3x i am trying to remove the right margin on the 3rd element but somehow my code just doesn't work. appreciate any advice!</p>
  
  <pre><code>&lt;div id="RightContent"&gt;
  &lt;h4&gt;Jewelry&lt;/h4&gt;
  
  &lt;ul class="grid cs-style-1"&gt;
  
    &lt;a href="#ProductDetail"&gt;
     &lt;li&gt;
      &lt;figure&gt;
       &lt;img src="images/ring.jpg" alt="img01"&gt;
        &lt;figcaption&gt;
        &lt;h3&gt;Atlas® closed narrow ring in 18k rose gold with a diamond.&lt;/h3&gt;
        &lt;span class="price"&gt;800&lt;/span&gt;
        &lt;a href="#Cart"&gt;&lt;span class="add"&gt;Add to Shopping Bag&lt;/span&gt;
        &lt;/figcaption&gt;
       &lt;/figure&gt;
      &lt;/li&gt;
    &lt;/a&gt;
  
    &lt;a href="#ProductDetail"&gt;
     &lt;li&gt;
      &lt;figure&gt;
       &lt;img src="images/ring.jpg" alt="img01"&gt;
        &lt;figcaption&gt;
        &lt;h3&gt;Atlas® closed narrow ring in 18k rose gold with a diamond.&lt;/h3&gt;
        &lt;span class="price"&gt;800&lt;/span&gt;
        &lt;a href="#Cart"&gt;&lt;span class="add"&gt;Add to Shopping Bag&lt;/span&gt;
        &lt;/figcaption&gt;
       &lt;/figure&gt;
      &lt;/li&gt;
    &lt;/a&gt;
  
    &lt;a href="#ProductDetail"&gt;
     &lt;li&gt;
      &lt;figure&gt;
       &lt;img src="images/ring.jpg" alt="img01"&gt;
        &lt;figcaption&gt;
        &lt;h3&gt;Atlas® closed narrow ring in 18k rose gold with a diamond.&lt;/h3&gt;
        &lt;span class="price"&gt;800&lt;/span&gt;
        &lt;a href="#Cart"&gt;&lt;span class="add"&gt;Add to Shopping Bag&lt;/span&gt;
        &lt;/figcaption&gt;
       &lt;/figure&gt;
      &lt;/li&gt;
    &lt;/a&gt;
  </code></pre>
  
  <p>So I have a piece of code like that above, and my css goes something like </p>
  
  <pre><code>.grid {
  padding: 0px 0px 0px 0px;
  max-width: 890px;
  margin: 0 auto;
  list-style: none;
  text-align: left;
  }
  
  .grid li {
  display: inline-block;
  width: 278px;
  margin: 0px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 0px;
  text-align: left;
  position: relative;
  }
  
  .grid li:nth-child(3n+3) {
  margin-right: 0px;
  }
  </code></pre>
  
  <p>The nth-child pseudo selector doesn't seem to be working. My 3rd &lt; li > item still has a margin. Would appreciate if anyone can point me to what exactly is wrong here?</p>
  
  <p>Thanks so much</p>