title: Why doesn't nth:child work on my site when it worked on my boilerplate?
body: <p>I'm a web development student and I'm trying to use nth:child in order to code a section of a site that has images on the left and text on the right, and then the next section has text on the left and images on the right etc.  Maybe it's a really simple mistake but I'm not sure why it's not working because my boilerplate worked.  I'm new to stackoverflow so I'm not really sure how to format a post, so the CSS is under the HTML.  I appreciate the help, thanks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.character img {
    height: 200px;
  }
  
  .character {
    display: flex;
    align-items: center;
  }
  
  .character:nth-child(even) .characterDetails {
    order: 1;
  }
  
  .character:nth-child(even) .characterImage {
    order: 2;
  }
  
  .character:nth-child(odd) .characterDetails {
    order: 2;
  }
  
  .character:nth-child(odd) .characterImage {
    order: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="characters"&gt;
    &lt;div class="character"&gt;
      &lt;div class="characterImage"&gt;
        &lt;img src="images/user.png" alt="Placeholder Image" /&gt;
      &lt;/div&gt;
      &lt;div class="characterDetails"&gt;
        &lt;h2&gt;Character&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non ex mattis neque condimentum pharetra non ac urna. Aliquam eleifend id sapien id convallis. Duis gravida pharetra lorem ut fermentum. Mauris semper neque vel imperdiet convallis.
          Fusce volutpat mi nec elit blandit luctus. Morbi lorem elit, facilisis vitae mi id, tempus scelerisque erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;&lt;br&gt;
        &lt;p&gt;Aenean sed dui magna. Proin eleifend risus eget porta bibendum. Donec ut diam sed tellus tempor mattis. Mauris at pharetra eros. Donec in volutpat sapien, ut ullamcorper tortor. Morbi placerat massa enim, vel tempor ante facilisis non. Praesent
          sollicitudin ante vitae pellentesque pretium. Curabitur ut leo mattis, convallis nisi eu, hendrerit dolor. Nullam sed efficitur risus. Proin quis dui commodo, sollicitudin purus id, blandit lacus. Fusce porta auctor varius. Fusce a ultrices nibh.
          Curabitur semper turpis ex, sit amet suscipit mauris ultricies ut. &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="characters"&gt;
      &lt;div class="character"&gt;
        &lt;div class="characterImage"&gt;
          &lt;img src="images/user.png" alt="Placeholder Image" /&gt;
        &lt;/div&gt;
        &lt;div class="characterDetails"&gt;
          &lt;h2&gt;Character&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non ex mattis neque condimentum pharetra non ac urna. Aliquam eleifend id sapien id convallis. Duis gravida pharetra lorem ut fermentum. Mauris semper neque vel imperdiet convallis.
            Fusce volutpat mi nec elit blandit luctus. Morbi lorem elit, facilisis vitae mi id, tempus scelerisque erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;&lt;br&gt;
          &lt;p&gt;Aenean sed dui magna. Proin eleifend risus eget porta bibendum. Donec ut diam sed tellus tempor mattis. Mauris at pharetra eros. Donec in volutpat sapien, ut ullamcorper tortor. Morbi placerat massa enim, vel tempor ante facilisis non. Praesent
            sollicitudin ante vitae pellentesque pretium. Curabitur ut leo mattis, convallis nisi eu, hendrerit dolor. Nullam sed efficitur risus. Proin quis dui commodo, sollicitudin purus id, blandit lacus. Fusce porta auctor varius. Fusce a ultrices
            nibh. Curabitur semper turpis ex, sit amet suscipit mauris ultricies ut. &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>