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

HTML How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

Posted by web pad
web pad
4,483 Points

Marked wrong in Challenge task 1/4. I answered margin: 0 10px; to remove margin on top and bottom and set 10px for left

This was the challenge:

Select the unordered list nested inside the nav element. Remove the margins on the top and bottom. Set the margins on the left and right to 10px.

gallery li {

float: left;

width: 45%;

margin: 0 10px; //This was my answer//

background-color: #f5f5f5;

color: #bdc3c7;

}

css/main.css 
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: 0 10px;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

3 Answers

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi web pad,

You targeted the wrong HTML elements in your CSS styling. the first thing you need to do is target the unordered list that is nested in the navigation. You do this by first targeting the parent and then the child, like this:

nav ul {

}

The second part of the challenge requires you remove the top and bottom margin, and set 10px to the left and right margin. A possible solution would be:

nav ul {
   margin: 0 10px 0 10px;
}

or

nav ul {
   margin-top: 0;
   margin-right: 10px;
   margin-bottom: 0;
   margin-left: 10px;
}

Hope it helps, Max

web pad
web pad
4,483 Points

Thank you so much!

Ine Van Severen
Ine Van Severen
7,018 Points
Ine Van Severen
Ine Van Severen
7,018 Points

nav ul { margin: 0 10px; }

you are targeting the List Items instead of the whole unordered list (ul)

web pad
web pad
4,483 Points

Thank you. I need to keep practicing.

Ine Van Severen
Ine Van Severen
7,018 Points
Ine Van Severen
Ine Van Severen
7,018 Points

try to make a website from scratch. I'm fairly new and making a website from scratch instead of change this change that. really helped me to get the hang of it :)

web pad
web pad
4,483 Points
web pad
web pad
4,483 Points

Thank you. Will definitely do that.