Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Responsive Web Design and Testing Refactor the Layout

Pierre Fatal
Pierre Fatal
3,727 Points

Inside the media query, clear the left side of every 4th list item in the gallery.

Help. How is this not correct?

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

13 Answers

Pierre Fatal
Pierre Fatal
3,727 Points

If you have this problem:

  • check the spacing of all characters
  • make sure to use (4n) not (4th) #gallery li:nth-child(4n) {clear: left;}
Matthew Bingham
Matthew Bingham
11,927 Points

You forgot the # ;)

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

sergio verdeza
PLUS
sergio verdeza
Courses Plus Student 10,765 Points

This is the way the answer should look, thanks to every one for your help.

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

}

Adam Duffield
Adam Duffield
30,494 Points

well thanks for teach me its 4n and not 4! :)

Adam Duffield
Adam Duffield
30,494 Points

Try 4 not 4th, or maybe that space inbetween li: and nth may have something to do with it. Make sure that "Gallery" is definetly an ID too and not a class. :) Hopefully one of these should cover it.

Adam Duffield
Adam Duffield
30,494 Points

Did that actually sort it for you? Wasn't feeling too confident in my answer I'm not the best with nth child elements myself!

Pierre Fatal
Pierre Fatal
3,727 Points

Yeah it did! Your answer lead me to focus on spacing issues and 4 not 4th.

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

there should be a # tag before the gallery. it didn't show up sorry . #gallery li:nth-child(4n) {clear: left;}

lina Hernandez
lina Hernandez
4,583 Points

Here the correct answer or at least this work for me ! :)

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

What worked for me is

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

I THOUGHT that I had attempted this already. I see other people had posted this in the forum. I was answering this question at the end of my day, my frustration and fatigue levels were high.

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

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

gallery li:nth-child(4n) {clear: left;} this worked for me

aleks shineleva
aleks shineleva
8,466 Points

It still doesn't work for me. I've ran into similar issues before, where it has to be refreshed multiple times before it actually accepts my answer.

@media screen and (min-width: 480px) { #gallery li { width: 28.3333%; }

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

}

this isn't working for me...any ideas why?

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

Matthew Bingham
Matthew Bingham
11,927 Points

Hi Rachel, I haven't done this course but your syntax looks a little incorrect, should it be?:

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

Looks like you missed a bracket?