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

Girri M Palaniyapan
Girri M Palaniyapan
7,829 Points
Posted by Girri M Palaniyapan
Girri M Palaniyapan
7,829 Points

I think I got the padding right but I am getting an error message.

The padding works clockwise starting from the top right? The challenge requires me to set the padding for the top to be 15 pixels. I am not sure where I have a bug in the code.

Thanks for your help!

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

nav ul {
    margin: 0 10px 0 10px;
    font-style:none;
    padding:0 ;
}

nav ul li {
  display: inline-block;
  font-weight:800;
  padding:15px 10px 15px 10px;
}

4 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Challenge 2 asks that you remove the bullet points on the ul. Not sure why it let you pass that, but it you should be using list-style-type:none instead of font-style:none; font-style is to set italic, oblique, or normal.

style.css 
nav ul {
  margin: 0 10px 0 10px;
  list-style-type: none;
  padding: 0;
}

But challenge 4 isn't passing because you're setting font-weight and padding on the li. It's asking that you set those properties on the nav links (a).

style.css 
nav ul li {
  display: inline-block;
  padding: 15px 10px 15px 10px;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

The challenge may be looking for:

padding-top: 15px;

This is the other way to adjust the top padding. It is good to know when you want to override the shorthand version of your padding or if you don't need to edit all four sides. Hope this helps!

Jasmin Mušić
Jasmin Mušić
4,371 Points
Jasmin Mušić
Jasmin Mušić
4,371 Points

Well if you need it for just top there are two ways:

  1. ussing the code padding-top:15px;
  2. ussing padding:15px 0 0 0
Girri M Palaniyapan
Girri M Palaniyapan
7,829 Points
Girri M Palaniyapan
Girri M Palaniyapan
7,829 Points

Thanks for your help folks. I just tried option 1 and adjusted the code but still the I don't seem to be successful at the challenge. I think the problem rests with the TreeHouse side right now.