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

Select the unordered list, remove the margin, set margin left and right to 10px

Im selecting inside #gallery li where it says 'margin:' and replacing the 2.5% with 0 10px 0 10px... but thats not right. Any clues where I'm going wrong?

Thanks,

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: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

6 Answers

Simple fix bud, you just didn't read the instructions carefully enough. It asks that you target the unordered list '<ul>' nested inside the nav element '<nav>'

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

OR

nav ul {
    margin: 0 10px;
}

Hope this helps, Happy Coding!

Hannah Goodridge
PLUS
Hannah Goodridge
Courses Plus Student 3,598 Points

First off #gallery li isn't an unordered list, its an li inside the unordered list. Try editing the margin on the #gallery not the #gallery li.

If that doesn't work try:

It could be that they want the short hand answer:

          margin: 0 10px;

or both margins defined separately:

          margin-left: 10px;
          margin-right: 10px;
Ali Raza
Ali Raza
13,633 Points

I saw ur challenge and it is not #gallery ul but instead it is nav ul so here's the solution

nav ul {
  float: left;
  width: 45%;
  margin: 0 10px;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

In the code I have it doesn't say ' nav ul' anywhere. The only list I can see is gallery li. This question I'm finding very confusing. Do I add 'nav ul' somewhere?

Yes most of the code challenges will have you adding code, not just changing it. Just changing code isn't much of a practice. I can tell someone with no coding knowledge to change the margin in the group that says "#galley li" and change the 2.5 to 0. It's testing your knowledge to select different elements from your HTML.

It's the wording of this question that has confused me. Saying 'select the unordered list' implies to me that it already exists. I spent a long time re reading everything looking for 'nav ul' before guessing it must be the only other li element on the page (#gallery li).

I've now changed '#gallery li' to 'nav ul' and found the correct answer though I'm still very unhappy with how this question has been phrased.

Well they say select the unordered list for two reasons. 1) it does exist. In your html it has a <ul> element 2) the string "nav ul" is called a selector.

I'm going to have to do this section again I think, it really doesn't make any sense to me.

I appreciate your help, Dylan, and everyone. Thank you all.