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 trialPascal Houben
7,566 PointsCorrect Answer being ignored by Code Challenge
Hey people,
although I provided the below correct answer, the code challenge keeps on asking me if I set "clear: left" for every 4th gallery item. Why is this?
gallery li:nth-child(4) {
clear: left;
}
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(3+1) {
clear: left;
}
}
2 Answers
Gaby Khoe
23,469 PointsHi pascal, try to use 4n in stead of 4. With 4n you saying every 4th child. With 4 you saying, only the 4th child.
#gallery li:nth-child(4n) {
clear: left;
}
Clayton Tevebaugh
7,617 PointsYour answer is actually wrong.
#gallery li:nth-child(3+1) {
clear: left;
This selects every 3 list item starting at the first list item +1. Also you are missing the n after your 3.
#gallery li:nth-child(4n+0) {
clear: left;
This is the correct code selects every 4th list item.
Marcus Parsons
15,719 Points3+1 will not work at all for selecting anything because of the missing "n" beside 3. It will not do anything when ran. Proof: http://codepen.io/anon/pen/eNvvyQ
Also, the "+0" is not necessary within the nth-child pseudo element.