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 Polish the Navigation and Footer

Posted by Scott Kaplan
Scott Kaplan
708 Points

Unevenly spaced nav elements

Following along in the Polish the Navigation and Footer section, I added font weight and padding as per instructions, but my page looks different than the instructors. The "Portfolio" section seems to have more space around it, or is pushing the other links to the right.

Here is my Navigation CSS:

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

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

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Scott,

Could you please post your html and css so we can take a look and help you out.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Scott Kaplan
Scott Kaplan
708 Points

THanks Wayne:

HTML and CSS below. Let me know if I'm still screwing it up the markdown process!

<header>
     <a href="index.html" id="logo">
      <h1>Scott Kaplan</h1>
      <h2>Copywriter</h2>
     </a>
     <nav>
      <ul>
        <li><a href="index.html" class="selected">Portfolio<a/></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
     </nav>
   </header>

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Alegreya Sans SC', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/***********************
NAVIGATION
************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

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

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Scott,

If you remove the padding here.

nav a {
  font-weight: 800;
}

And add a margin left here.

nav li {
  display: inline-block;
  margin-left: 20px;
}

Then things should be good.

Nichelle Segar
Nichelle Segar
9,857 Points
Nichelle Segar
Nichelle Segar
9,857 Points

This was driving me nuts, too. I started experimenting with the nav margin and came up with this:

nav { text-align: center; padding: 10px 0; margin: 20px 0 0 -40px; }

The "40" centered the navigation links almost perfectly under my name in the header. Hope that works for you.