question: why write CSS for the first layout in main.css and not write all the CSS in responsive? something like this: @media screen and (min-width: 10px) {...

This is still in the 3 column layout?

The previous video has a correction in the teacher's notes for :nth-child().

The correct expression is 3n + 1

Did you change it to that?

I did and it is still doing it.

any ideas? I tried safari and chrome. http://cl.ly/image/0s14012k0S2l

http://cl.ly/image/0s14012k0S2l

This is what I have. I finished the track and all of my code validates correctly.

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

It happens during 2 column just before switching to three columns.

There needs to be another :nth-child expression for the two column layout because the same problem occurs in both the 2 and 3 column layout. I don't think the 2 column solution is covered in the videos though.

In main.css you want to add :nth-child(2n +1):

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

#gallery li:nth-child(2n + 1) {
    clear: left;
}

That nth-child is only good for the 2 column layout. We don't want those same items clearing the floats in the 3 column layout. So we have to remove that clear property first before we clear the floats on the correct items for a 3 column layout.

In responsive.css:

#gallery li {
    width: 28.3333%;
}

#gallery li:nth-child(2n + 1) {
    clear: none;
}

#gallery li:nth-child(3n + 1) {
    clear: left;
}

This should fix the layout problems for both the 2 and 3 column layout.

Let me know if you have any questions about it.

thanks a lot Jason!

thanks a lot Jason!