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

Posted by Alexander D
Alexander D
8,685 Points

Center Navigation

Hello there,

These below are clear to me:

nav {
display:inline-block;
}
nav li {
float:left;
}

What is not clear to me is why we're targeting the Header to center this element in the browser, and not the Nav element (navigation).

I tried the following, and didn't work. 

nav {
text-align: center;
}

I understand the Header element is "wrapping" the Li elements around, but I don't understand why I can't specifically influence the Li elements and I have to add a rule for the header.

2 Answers

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

It is just easier to add the text-align property to the header element since they are child elements and that you want to center the h1 aswell, also you aren't repeating unnecessary styles to your css. However, text-aligning the nav does work see below.

<html>
  <head>
    <title>Center align</title>
  </head>
  <header>
    <h1>My Site!</h1>
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Gallery</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
</html>

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block; /* This needs to be set in order for the text-align property on the nav element to work */
}

header {
  background: orange;
  margin: 0;
  padding: 10px 0;
  color: white;
}

nav {
  text-align: center;
}

/*  You should be using this code instead of the above

header {
  text-align: center;
}

*/

nav li {
  float: left;
  background: firebrick;
  margin-right: 5px;
  padding: 10px 15px;
}

Put a background on the nav element when you change it from default (block) to inline-block. When you put it to inline-block, its width is by default the size of its content. Therefore, thats why your text-align property wont work on it, try setting its width to 100% of the header element. That is also why the header (by default is block) aligns the elements to the center correctly.

Alexander D
Alexander D
8,685 Points
Alexander D
Alexander D
8,685 Points

Thanks for your answer Jamie, and for taking the time to write this. I just added this to Atom and playing around with this code. Very, very helpful!