Fixed Navigation Menu With Logo On The Right

HTML

<div id="nav">
    <div id="nav-wrapper">
        <div id="nav-left">
            <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 id="nav-right"> 
        test
            <img src="https://yt3.ggpht.com/-sa7F656qXo0/AAAAAAAAAAI/AAAAAAAAAAA/jzG_AM4hOW8/s100-c-k-no/photo.jpg" />tet
        </div>
    </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>

CSS

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

#nav{ background-color: #222; position: fixed; width: 100%; top: 0; padding: 10px 0 10px 0; }
#nav-wrapper{ width: 960px; margin: 0 auto; text-align: left; }

#nav-left{ float: 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; }

#nav-right{ float: right; }
#nav-right img{ width: 45px; vertical-align: middle; margin: 2px 0 0 0; }

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