title: Can someone help me target my container divs with the nth-child pseudo-class?
body: <p>I'm coding for a very simple flex-based 2 column grid for a portfolio page where each .container classes need to have individual images that correlate to the projects they link to. Instead of giving each of these an ID and targeting them individually, I want to use .container:nth-child to just select them in the order that they appear. The problem is that the nth-child(1) works, but every nth-child(2,3,4..etc) just uses the same image as nth-child(1) despite me linking different images in each.</p>
  
  <p>I've tried just about every variation of being more specific like: "main a div.container:nth-child(2) {}", "main a div:nth-child(2) {}", "main .container:nth-child(2)", etc. to no avail.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;main&gt;
              &lt;a href="happy.html"&gt;&lt;div class="container"&gt;
                  &lt;div class="overlay"&gt;
                      &lt;h3&gt;An Inquiry On &amp;quot;Happy&amp;quot;&lt;/h3&gt;
                      &lt;p&gt;Senior Project&lt;/p&gt;
                      &lt;p&gt;Spring 2019&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;/a&gt;
  
              &lt;a href="biopsy.html"&gt;&lt;div class="container"&gt;
                  &lt;div class="overlay"&gt;
                      &lt;h3&gt;A Biopsy in Verse&lt;/h3&gt;
                      &lt;p&gt;Publication&lt;/p&gt;
                      &lt;p&gt;Fall 2018&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;/a&gt;
      &lt;/main&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 80%;
      align-items: center;
      margin: 25vh 10% 0 10%;
  }
  
  .container {
      width: 38vw;
      height: 500px;
      display: flex;
      margin-bottom: 4vw;
  }
  
  main a div.container:nth-child(1) {
      background-image: url(../images/portfolio/1.png);
  }
  
  main a div.container:nth-child(2) {
      background-image: url(../images/portfolio/2.png);
  }
  </code></pre>
  
  <p>I just need each div with the .container class to have a unique background-image. There's a lot of other CSS as well that's dealing with the functioning overlay hover effect, that .overlay div within. I wouldn't think that would be affecting anything, but who knows.</p>