I am creating a responsive site as a practice of what was shown in the Responsive Web Design lesson. Essentially, 5 images, lined up two per row when the viewport is in mobile view, then it shifts to 3 per row once the viewport reaches 480px. The issue I am having is that due to the caption length of image one increasing by one line in mobile view, image 3 is unable to float left. In the lesson nick added the following CSS to responsive.css to clear the "stuck" image (in the lessons case, it was the 4th image that was "stuck"):

#gallery li:nth-child(4n) {
    clear: left; 
}

I tried that same trick for the third image in my case and it solved the problem in mobile view (the code was added to main.css)....however, now when the viewport reaches 480px, the third image no longer shifts to the first line to achieve 3 images per line since the last instruction it received was to clear: left.

I tried to solve this by taking advantage of the cascading nature of CSS and adding the following code to the 480px media query in responsive.css:

#gallery li:nth-child(3n) {
    float: left; 
}

which i believe should override the clear:both instruction for image #3 in main.css, however it will not move up! image 5 however does move up to the second line as expected and I end up with row 1 containing 2 images and row 2 containing 3 images.

What it is going on here?!

here's the relevant code:

index.html

<div id="sectionWrapper">

  <section>
    <ul id="gallery">  
      <li>        
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture</p>
        </a>
      </li>
      <li>        
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Playing with blending modes</p>
        </a>
      </li>
      <li>        
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Drips</p>
        </a>
      </li>
      <li>        
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Experimentation with color and texture</p>
        </a>
      </li>
      <li>        
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes using repetition</p>
        </a>
      </li>
    </ul>
  </section>
  <!-- end sectionWrapper div -->
 </div>

main.css

/*********************** GALLERY ***********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

gallery li:nth-child(3n) {

clear: left; /* to deal w/ increased caption lines due to wrapping when minimizing */

}

responsive.css

@media screen and (min-width: 480px) {

/*********************** PAGE: HOME ***********************/

gallery li {

width: 28.333333333%; margin: 2.5%; }

gallery li:nth-child(3n) {

float: left; /* to deal w/ increased caption lines due to wrapping when minimizing */

}

I have reproduced this error in the latest versions of Sari, Chrome, and Firefox for mac.