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 trialmatthew steiner
6,264 PointsWhat 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.
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;}
}
3 Answers
Ariel Aronica
6,646 PointsI'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
6,264 PointsThat was totally it! weird. Thanks!
matthew steiner
6,264 PointsAh, that DOES make sense! Thanks Ariel, you're awesome!
Ariel Aronica
6,646 PointsAriel Aronica
6,646 Pointstry erasing the space between the colon and the li.