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

CSS How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Eliot Ostling
Eliot Ostling
9,599 Points
Posted by Eliot Ostling
Eliot Ostling
9,599 Points

In Style and Navigation Code Challenge, the challenge is to float the nested gallery to the left and width to 45.

gallery{

margin:0; padding:0; list-style:none;

}

gallyer li{

float: left; width:45%; margin:2.5%; background-color:#f5f5f5; color:#bdc3c7; }

How is this incorrect?

css/main.css 
a {
  text-decoration: none;
}

body{
font-family:'Open Sans', sans-serif; 
}

img{
max-width:100%;
}


#gallery{
margin:0;
  padding:0;
  list-style:none;
  float: left;
  width:45%;
} 

#gallyer li{
  float: left;
  width:45%;
  margin:2.5%;
  background-color:#f5f5f5;
  color:#bdc3c7;

}





#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;
}

2 Answers

Christopher Aporta
Christopher Aporta
24,258 Points

Hey Eliot,

Looks like you have a typo where your "gallyer li" selector should read "gallery li". Also, you only want to float the list items left, not the gallery itself. Your code should look like this...

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;
}
Eliot Ostling
Eliot Ostling
9,599 Points
Eliot Ostling
Eliot Ostling
9,599 Points

Thank you! After I posted I actually saw the error of my ways! Thank you for responding! :D