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

secilinam
secilinam
1,273 Points
Posted by secilinam
secilinam
1,273 Points

what am i doing wrong?

Now, clear the left side of every 4th list item in the element with the id of "gallery". Here's a hint: You'll need to write another selector inside of the media query at the bottom of the file, in addition to the one you wrote in the previous step. You'll also need to use the nth-child pseudo selector.

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

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

5 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It looks like you haven't closed out your media query.

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

}

Add the final square bracket to the media query you should be good to go. :-)

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Secil,

Aside from the missing closing brace, your code is correct, except you have a whitespace error that will give you a Bummer!

In your selector, there cannot be a space after the : (#gallery li:nth-child(4n))

Fix that and you're good to go. Keep Coding! :)

Shahzaib Awan
Shahzaib Awan
13,767 Points
Shahzaib Awan
Shahzaib Awan
13,767 Points

You should use this hope its will work :)

gallery li:nth-child(4n) {

clear:left; }

Vinny Christiani
Vinny Christiani
2,264 Points

This actually worked. I have tried everything else and nothing worked except what you just said. I'm not sure what the difference is between

gallery li:nth-child(4n) {

clear:left; }

and

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

}

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Vinny,

What's happening is you're adding a different kind of selector called a pseudo class which attaches to a normal selector. nth-child is a specific type of pseudo class. If you put a space between the selector and the pseudo class selector i.e. the colon (:) then the browser doesn't know that you're trying to use one. It needs to be all one selector value. :-)

secilinam
secilinam
1,273 Points
secilinam
secilinam
1,273 Points

Thank you very much

Javier Toledo
Javier Toledo
812 Points
Javier Toledo
Javier Toledo
812 Points

Thank you I was crazy about it and the only thing I'd to do was to eliminate the spaces in between #gallery li:nth-child(4n) { /* this line after and before (:) */ clear:left; }

}