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

matthew steiner
matthew steiner
6,264 Points
Posted by matthew steiner
matthew steiner
6,264 Points

What is wrong with this line of code? Quiz doesn't like it for some reason. #gallery li: nth-child(4n) {clear: left;}

I can't get this to work in the quiz, however I tried it out in my Workspaces at it is fine.

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.3333%;}
  #gallery li: nth-child(4n) {clear: left;} 
}
Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

try erasing the space between the colon and the li. 

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

3 Answers

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

I'll try to explain... because it does seem weird! But, when you write the list item, as well as which item you want the action to work on... it's actually all "one element." Adding the space would indicate you are wanting a different element to be targeted (just like the gallery is an element on its own). By closing the space it tells the browser that the action belongs TO the list items you are indicating, rather than reading the nth-child on its own. Hope that helps clear it up for you.

matthew steiner
matthew steiner
6,264 Points
matthew steiner
matthew steiner
6,264 Points

That was totally it! weird. Thanks!

matthew steiner
matthew steiner
6,264 Points
matthew steiner
matthew steiner
6,264 Points

Ah, that DOES make sense! Thanks Ariel, you're awesome!