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

brigid ochshorn
brigid ochshorn
2,951 Points

I am stumped on how to remove all margins from the gallery selector in this code question.

I am stumped on how to remove all margins from the gallery selector in this code question.

css/main.css
a {
  text-decoration: none;
}
#gallery li {
  width: 100%;
  margin: 0px;
  padding: 0px;
  list-style: none;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

 img {
   max-width: 100%;
   width: 45%;
}

#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

Brendan Whiting
MOD
Brendan Whiting
Front End Web Development Treehouse Moderator 83,956 Points

In step 2, we were asked to remove the margin, padding and bullet points on the #gallery item. In step 3, we're asked to add a rule for the li items inside of the #gallery item. I'm not 100% sure, but it seems might have completed step 2 and then modified the rule for step 3 and that's when it started complaining that you're not setting the margins to 0.

At any rate, what you need is one rule targeting #gallery and another rule targeting list items inside gallery, #gallery li.

#gallery { # this targets the element with the id 'gallery'
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#gallery li { # this targets 'li' elements inside the '#gallery' item
 # more styles here...
}
Kuanyshbek Ospanov
Kuanyshbek Ospanov
13,756 Points
#gallery {
  margin: 0;
  padding: 0;
  list-style-type:none;
}