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 Hayden Bradfield
Hayden Bradfield
1,797 Points

Why does my nav tend be offset to the right even though I centered it?

Here is the HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <link rel="stylesheet" href="normalize.css" media="screen">
        <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="main.css" media="screen">
    </head>
    <body>
            <div id="wrapper">
                <header>
                <a href="index.html">
                    <h1>Hayden Bradfield</h1>
                    <h1><small>Web Designer Student</small></h1>
                </a>
                <nav id="nav">
                <ul id="mainmenu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </nav>
                </header>
                <section>
                </ul>
                    <h2>Intro</h2>
                    <p>This is a test page.</p>
                    <h2>More Info</h2>
                    <p>Helllllllllllllllllllllllllllllllllllllllllllllooooooooooooooooooooooooooooo!</p>
                    </section>
                <div id="foot">
                        <small>&copy Hayden Bradfield</small>
                </div>
            </div>
    </body>
</html>

Here is the CSS:

body {
    background-color:#999;
    margin: 0% 0%
}

section {
    background-color:white;
    margin-top:0% 0%;
    padding-right:15px;
}
header {
    background-color:#465E84;
}

header h1 {
    margin: 0% 0%;
    text-align:center;
    padding-top:4px;
    padding-bottom:3px;
    font-family: 'Bungee Inline', cursive;
}

header h1 small {
    font-family: 'Gloria Hallelujah', cursive;
}

header a 
{
    text-decoration:none;
    color:white;
}

h2 {
    margin: 0% 0%;
    padding-left:20px;
    padding-right:15px;
    padding-top:0.5em;
}

p {
    padding-left:20px;
    word-wrap:break-word;
    padding-right:15px;
    padding-bottom:0.5em;
    display:block;
}

nav {
    background-color:#89cff0;
    margin: 0% 0%;
    text-align:center;
}

nav ul {
    margin: 0% 0%;
    padding-top:0.5em;
    padding-bottom:0.5em;
    list-style:none;
}


nav ul li {
    display:inline;
    text-align:center;
    margin: 0% 0%;
    padding-left:2px;
    padding-right:2px;
}

nav ul li a {
    text-align:center;
    margin: 0% 0%;
    text-decoration:none;
    color:#465E84;
    font-family: 'Fjalla One', sans-serif;
}

nav ul li a:hover {
    color:white;
}

p {
    margin: 0% 0%;
}

#foot {
    margin: 0% 0%;
    background-color:#465E84;
    height:100%;
    bottom:0;
    position:relative;
    text-align:center;
    color:#89cff0;
}

2 Answers

tylerpostuma2
tylerpostuma2
5,175 Points

Hey Hayden,

I found the error using chrome developer tools if you wanted to know how I found it! You are really close, but the issue is that your 'ul' has a slight padding left, which is pushing all of your nav items to the right. The way to fix this is to put this under your 'nav ul' like this:

nav ul { padding-left: 0; }

Hope this helps! If you have anymore questions, feel free to reply again!

Hayden Bradfield
Hayden Bradfield
1,797 Points

That really helped! Thank you!

tylerpostuma2
tylerpostuma2
5,175 Points

No problem! Glad I could help!

jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey Hayden,

You'll find that you have some extra padding on the left If you inspect the unordered list in your nav.

Quick fix:

nav ul {
    /* padding-top:0.5em; */
    /* padding-bottom:0.5em; */
    padding: 0.5em 0;
}

Notice that I'm zeroing out the left and right padding?

Hayden Bradfield
Hayden Bradfield
1,797 Points

I am not talking about the padding between the links. I am talking about the entire navigation menu as a whole. The entire navigation is offset to the right slightly.