Fix Horizontal Navigation

<div id="nav">
    <div id="nav-wrapper">
        <ul>
            <li><a href="#">item #1</a></li>
            <li><a href="#">item #2</a></li>
            <li><a href="#">item #3</a></li>
            <li><a href="#">item #4</a></li>
            <li><a href="#">item #5</a></li>
        </ul>
    </div>
</div>

<div id="wrapper">
    <div id="content">
        <h3>This is a heading!</h3>
        <p>You're learning how to create a fixed horizontal navigation menu!</p>
    </div>
</div>

body{ overflow-y: scroll; padding: 0; margin: 0; font-family: Arial; font-size: 16px; background-color: #F1F1F1; height: 2000px; }

#nav{ background-color: #0072BA; position: fixed; width: 100%; top: 0; }
#nav-wrapper{ width: 960px; margin: 0 auto; text-align: left; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; }
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }

#wrapper{ width: 960px; margin: 0 auto; text-align: left; }
#content{ background-color: #FFF; border: 3px solid #DDD; padding: 20px; margin: 80px 0 0 0; }