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

Richard Skinner
Richard Skinner
5,839 Points
Posted by Richard Skinner
Richard Skinner
5,839 Points

My nav is just slightly off center from the header. What am I doing wrong?

Okay, so here is my head code for my nav font:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous|Teko">

And here is my CSS for the nav:

/************** 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; font-size: 100% }

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

The problem is that my nav is centered, but it is not completely centered with the header. It is off just by a bit. Could it be the font I chose, or some styling that I need to change?

Thanks

2 Answers

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hey Richard,

Have yo try resetting the your headers elements margin and padding to 0? You see every browser has it's predefined styles. Try resetting first all your tag elements margin and padding.

Like this (add this at the begging of your css style) :

img, h1, h2, h3, p, li, ul {
  margin: 0;
  padding : 0;
}

Hope this help. If not try adding your whole codes for HTML and CSS so we can check them better.

Cheers!

Owa

Richard Skinner
Richard Skinner
5,839 Points
Richard Skinner
Richard Skinner
5,839 Points

Ahh, I see what's going on. What I actually did (which I was slightly proud of myself for lol) was I went to my page preview and inspected the code from there.

I clicked on the nav tag and it highlighted all of the padding, margins, etc. I saw I was off on the left, so I added the selector padding-left and changed it to 0. It worked like a charm and its nice and centered now.

I don't know if what I did was appropriate from a "best practices" point of view, but it worked!

Thanks for your Help!

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

That's really great! Remember that in web designing everyone has it's own way to solve problems.

Now just keep at it :)

Cheers!

armand Rodriguez
armand Rodriguez
7,830 Points
armand Rodriguez
armand Rodriguez
7,830 Points

I had the same problem, and similar to you i think maybe the font choice messed things up. I added margin-left: -35px to move it over. I'm not sure if this is what i should be doing, but i really couldn't figure it out otherwise.