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

Posted by Samuel Perrett
Samuel Perrett
1,494 Points

Can't seem to get my navigation/link buttons to centre, they're slightly over to the right

Hi, i'm very new to all this, and trying to create a landing page for my website, with some links to external pages such as twitter, my blog and an email link. I've managed to set up the layout so my logo, and some text and the copyright in the footer is all aligned in the centre, but my navigation/links just sit over the the right slightly. It's very noticeable when the browser is set to a more narrow shape and the link buttons stack.

The HTML:

<div id="nav">
            <ul>
                <li><a href="mailto:samuel@samuelperrett.co.uk">Email</a></li>
                <li><a href="https://twitter.com/samuelperrett" target="_blank">Twitter</a></li>
                <li><a href="http://instagram.com/samuelperrett" target="_blank">Instagram</a></li>
                <li> <a href="http://samuelperrettsketchbook.tumblr.com" target="_blank">Blog</a></li>
            </ul>
        </div>

The CSS:

#nav{
    display:inline-block;
}
:link{
    text-decoration: none;
    color:white;
}

:visited{ 
    text-decoration: none;
    color:white;
}

li{
    display:inline-block;
    font-size: 0.9em;
    color: white;
    list-style: hidden;
    background-color:black;
    padding:8px;
    margin: 5px;
    border-radius: 15px;
    width:150px;
    color:white;
}

I might be making a lot of sloppy mistakes here and would appreciate any help possible.

Thanks

2 Answers

Justin Wiswell
Justin Wiswell
9,494 Points
Justin Wiswell
Justin Wiswell
9,494 Points

Without running the code, one suggestion I can make is to change your list style over to none:

list-style:none;

Invisible elements can still take up space on the page.

Samuel Perrett
Samuel Perrett
1,494 Points
Samuel Perrett
Samuel Perrett
1,494 Points

Thanks for you suggestion, i've tried that it sadly it didn't make any difference. When i google how to get the navigation list to be centred it looks like I've done everything right, but there is obviously something wrong. I first thought it might be an indent, or the boxes are centred including the area of the bullets that i've removed.