Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

My Nav items have a white background and are not centered.

When I look at workspaces, I see white boxes behind the nav items and they are not centered together.

My CSS is as follows

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

AND my HTML is as follows

<nav>
    <ul id="gallery">
      <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>

5 Answers

Hi Elizabeth,

You've accidentally given your ul in the nav the id "gallery" This is causing your nav to inherit the gallery styles.

It should be:

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

This id should only be for the gallery that's in your content area below the header.

THANK YOU!!!!

Elizabeth,

I think I know what you are talking about with the 'White Boxes'.

It looks like it has to do with the padding on this line:

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

This is causing the a element to be slightly offset on the li element

Try to move that padding off of the a element and over to the nav li element with the parameters below:

nav li { display: inline-block; padding: 5px 10px 5px 10px}

I think this should solve your issue! Let me know.

When I do that, the white boxes are on top of each other instead of next to each other. Also on the selected Nav item is readable, the rest are white.

What do you mean by not centered together?

When I copied your code, I added it to a page I'd already created and didn't see any box's behind the text. They were all in a row horizontally.

Let me know what you're looking for or copy more of your code and I'll try to help out.

I attached my entire CSS and the header part of my HTML. Maybe it has to do with the header? I can't seem to find any inconsistencies.

/******* General *******/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; } a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/******* Heading *******/

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

logo {

text-align: center; margin: 0; }

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

h2 { font-size: .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; }

/******* Footer *******/ footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc;
}

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/******* page: portfolio *******/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: bdc3c7; }

gallery li a p{

margin: 0; padding: 5%; font-size: 0.75 em; color: #bdc3c7; }

/******* page: about *******/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******* Colors *******/

body{ background-color: #fff; color: #999; }

header { background: #6ab47b; border-color: #599a68; }

nav { background: #599a68; }

h1, h2 { color: #fff; }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f; }

<header>
  <a href="index.html" id="logo">
    <h1>Elizabeth Stellato</h1>
    <h2>Web Developer</h2>
  </a>
  <nav>
    <ul id="gallery">
      <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>

When I upload that, it looks great. I don't use workspaces, but I'll try it in there.

Your name and web developer are in the main bar aligned to the left and the nav bar is centered below that. Is that the look you're going for?

Here's my link to the workspace...not sure if it will work.

http://web-68lpcgsavo.treehouse-app.com/

I'm not sure. Would it be possible for you to create a new workspace with the HTML5 boilerplate and copy your code (HTML & CSS) in there? I'd try that first.

If you inspect your HTML on that page and mine, they're identical (at least for the header).