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

Tisha Cullen
PLUS
Tisha Cullen
Courses Plus Student 689 Points
Posted by Tisha Cullen
Tisha Cullen
Courses Plus Student 689 Points

Not sure why it isn't right

I keep getting the bummer but I got question 1 right and did question 2 the same with the requested parameters. I am not sure what I am doing wrong.

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.333%;
  }

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

/* The code is the @ media screen..., the 2nd #gallery is the one that isn't working.*/

2 Answers

Jesse Barbour
Jesse Barbour
16,532 Points
Jesse Barbour
Jesse Barbour
16,532 Points

Try removing the space between #gallery li: and nth-child so that it looks like this:

gallery li:nth-child(4n) {

Tisha Cullen
PLUS
Tisha Cullen
Courses Plus Student 689 Points
Tisha Cullen
Tisha Cullen
Courses Plus Student 689 Points

That was it thank you! Not sure how I missed that.