Search code examples
htmlcssnavigationalignmentcenter

Nav drop down menu not centered

So I'm following along perfectly with this video that's showing how to write a drop down nav, bascially just tying to find the easiest and best looking way to write one. Anyway on the video the guys text seems to align in his navigation, but mine doesn't.

Video: https://www.youtube.com/watch?v=PN1iMaVfzfQ

HTML

Navigation with dropdown menu

<link href="styles.css" type="text/css" rel="stylesheet"/>


<body>

    <div id="nav">
        <div id="nav-wrapper">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Social</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

CSS

body{
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    font-family: Arial;
    font-size: 18px;
}

#nav {
    background-color: #222;
}

#nav_wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
Solution

  • Your underscore should be a hyphen in CSS. 

    #nav_wrapper should be #nav-wrapper.