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

Posted by Rory Matthews
Rory Matthews
2,287 Points

My navigation elements ('Pictures', 'About' and 'Contact') are not centred.

My logo element centres on the page perfectly, but my navigation link are slightly to the right of centre.

The following seems to work to centre the logo element on page:

```#logo { text-align: center; }

Doing the equivalent for 'nav' does not appear to centre the links:

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

9 Answers

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Yea i was thinking the same so i did some digging. You will be pleased to hear that although i fixed the problem with the minus margin; it was infact a typo that you missed on your css file, line 75 and line 84.

At first i thought it could be the fact you changed the font and this could effect the line spacing etc but it just comes down to not completing the markup on the lines correctly, if you add the colon on line 75 & 84 the 'nav' centers correctly without using minus numbers.

Although its annoying making mistakes it's alot better learning from mistakes rather than going along not realizing what caused the problem, the fact you responded to my earlier reply just shows how you got the skills.

Good luck in the future. Glad i worked it out as was bugging me too!!

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

You want to target the 'nav' to position it but also remember to target the 'li' list items inside the 'nav' so they are centered not just the parent 'nav' div.

p.s. Your margin should have four values or just two values to target top, right, bottom and left.

Copy your full code if need more help. Hope helps a little.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Yea will have a look, hold on a minute.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Hey your site is really impressive and great coding, shame you got stuck as you will kick yourself when you see i only changed the margin, left a comment to show you what i edited.

https://space.zeo.net/g/l5zm .

Hope this is what you needed solving, best of luck. Let me know if you need any other help.

Rory Matthews
Rory Matthews
2,287 Points
Rory Matthews
Rory Matthews
2,287 Points

Hey, thanks for such a quick response. I tried

```nav li { display: inline-block; text-align: center; }

But nothing seems to change I'm afraid. I've uploaded the files here for you if you had time to help me further?:

https://space.zeo.net/z/ktju
Rory Matthews
Rory Matthews
2,287 Points
Rory Matthews
Rory Matthews
2,287 Points

Thanks! Any good code can really just be put down to the course content, it's great! Appreciate you taking the time to look at it. That does indeed fix the problem, but I can't help thinking that it's something else. If I apply the css file from the 'project files' that come with the course, the problem is also fixed but without specifying a minus value on the left margin as you have done for me. I've uploaded it below

https://space.zeo.net/z/tm7a

Rory Matthews
Rory Matthews
2,287 Points
Rory Matthews
Rory Matthews
2,287 Points

Ah. Haha.

I can't believe it was that simple but you're dead right. I too had guessed it had something to do with using different fonts, but it was just syntax again!

It would have taken me days to figure it out on my own! I really appreciate the help and the encouragement, it means a lot.

All the best,

Rory

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Haha, I know its a crazy world inside a code document, get lost very easily. Yea no worries glad could help!