SO http://is.gd/Remi9c

by panchroma

HTML

<div id="header-wrapper">
<div class="header">
<div class="nav-wrapper">
<div class="nav">
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">CONTACT</a></li>
</div>
</div>
</div> 
</div>

CSS

#header-wrapper {
    padding: 0 5% 0 6%;
}
.header {
    height: 150px;
    margin: 0 auto;
    max-width: 1200px;
}
.nav-wrapper {
    float: right;
    white-space: nowrap;
}
.nav {
    display: inline-block;
    padding: 50px 0;
}
.nav li {
    float: left;
    padding: 10px;
    list-style:none;
}  

@media screen and (max-width: 375px){
    /*  adjust width to match approx width of menu bar */
.nav-wrapper {
    float: left;
        min-width:375px;
}
}