Hello, I am lost. How to clear left side of every 4th list item in the gallery?

Hi, You will want to select the every 4th item with the nth-child selector.

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%;
  }
  #gallery li:nth-child(4n) {
    clear: left;
}

If you are unsure how it came to be 4n, I do suggest you review/watch this Treehouse Video

Keep Coding! :)

I actually think Nick may be mistaken about having to clear every 4th list item, and although it works the same way with just 2 rows, here's what I think the code should be:

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%;
  }
  #gallery li:nth-child(3n+4) {
    clear: left;
  }
}

Using 3n+4 instead of 4n will clear every 3rd list item starting with the 4th (i.e. the 4th, 7th, 10th, and so on list items). As the gallery has 3 images per row, I think using 3n+4 is a more suitable choice than 4n.

To select every 4th list item, you would need to use a pseudo selector such as nth-child().

If you look in the code for the previous video, you will find an example of nth-child() being used.

Hope this helps :)

EDIT: removed "The challenge is a bit strange as it only accepts 1 answer but I think there is more than 1 way to achieve the same result." - I was using nth-child(4) and while the result looks the same its not what the question is asking - see Jason's post