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 Create a Horizontal List of Links

Posted by Matthew King
Matthew King
2,477 Points

Very confused by this challenge question!

Here is the question:

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.

I typed:

nav ul {

 margin: 0px 10px;

}

I got the following message: Bummer! Be sure to set the top margin to 0!

I've looked all over and I'm pretty sure the code I typed does this. For instance on w3schools.com I found the following example:

margin: 25px 50px; top and bottom margins are 25px right and left margins are 50px

What am I doing wrong?!

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

#nav ul {
  margin: 0 10px;
}

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

7 Answers

Anna Casey
Anna Casey
3,101 Points
Anna Casey
Anna Casey
3,101 Points

It looks to me like the # in front of your nav element is unnecessary. Try eliminating it and see if that helps.

So this:

nav ul {
  margin: 0 10px;
}

Instead of this:

#nav ul {
   margin: 0 10px;
}
Aaron Chiandet
Aaron Chiandet
9,826 Points
Aaron Chiandet
Aaron Chiandet
9,826 Points

It may want you to show how to do it the longer way.

margin: 0 10px 0 10px;
Matthew King
Matthew King
2,477 Points
Matthew King
Matthew King
2,477 Points

I tried that, and several other options as well!

Aaron Chiandet
Aaron Chiandet
9,826 Points
Aaron Chiandet
Aaron Chiandet
9,826 Points

If you list what options you've tried, it would help us out tremendously. What about listing the margins individually?

margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
Matthew King
Matthew King
2,477 Points
Matthew King
Matthew King
2,477 Points

Unfortunately I'm in a time crunch to finish this tutorial. I don't have time to try every possible correct combination. I haven't written down all of the things I tried. Most of the options given on the w3schools.com page.

Aaron Chiandet
Aaron Chiandet
9,826 Points
Aaron Chiandet
Aaron Chiandet
9,826 Points

Wow, you're welcome. Good luck with everything.

David Hyde
David Hyde
4,288 Points
David Hyde
David Hyde
4,288 Points

Can anyone explain why the # isn't required in the above? what is the difference between say gallery where you are using a # and nav here where it isn't required?

Thanks!

Anna Casey
Anna Casey
3,101 Points
Anna Casey
Anna Casey
3,101 Points

Because nav is not an id selector, but rather a basic element in the html code. It appears this way:

<nav>  </nav>

and not this way, which would require the #:

<nav  id="nav"> </nav>

Hope this helps!

NiKole Maxwell
NiKole Maxwell
11,083 Points
NiKole Maxwell
NiKole Maxwell
11,083 Points

Thank you Anna! I ran into the same thing. Tried literally almost every combination I could think of.