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 trialsean farrelly
1,614 Pointsnow clear the left side of every 4th list item in element with the ID of gallary. Here's a hint: you'll need to write
now clear the left side of every 4th list item in element with the ID of gallary. Here's a hint: you'll need to write another selector inside of the media query at bottom of the file, in addition to the one you wrote in the previous step. you'll also need to used the nth-child pseudo selector.
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 {
max-width: 28.3333%;
}
#gallery li :nth-child(4n) {
clear: left;
}
}
3 Answers
Jennifer Nordell
Treehouse TeacherHi there sean farrelly! You're doing really well. Your code is off by a total of one space. Now, some things in CSS are not that picky about white space. This time it's make or break. Take a look at the altered line:
@media screen and (min-width: 480px) {
#gallery li {
max-width: 28.3333%;
}
#gallery li:nth-child(4n) { /*remove the space between the li and the colon */
clear: left;
}
}
Keep going!
cossy
17,748 Points@media screen and (min-width: 480px) { #gallery li { max-width: 28.3333%; }
#gallery li:nth-child(4n) { /*remove the space between the li and the colon */ clear: left;
} }
sean farrelly
1,614 PointsThe answer is as follows
gallery li:nth-child(4n) {
clear: left; } }