What is wrong with my nav?

Everything else on the page expands or shrinks as the page is resized, except the list that makes up the nav. What am I doing wrong? It's as though the first item is anchored to the left.

codepen: http://codepen.io/kiddigit/pen/mEPENJ?editors=1100

    <header>
        <img src="images/m_and_m_logo.png" />
        <ul id="nav">
            <li><a href="#">Gift Baskets and Catering</a></li>
            <li><a href="#">Tasting Calendar</a></li>
            <li><a href="#">Membership</a></li>
            <li><a href="#">Special Events</a></li>
        </ul>
    </header>

*{
    width:100%;
    border:0px solid black;
    -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
     font-family: 'Roboto', sans-serif;
}

header {
    width: 100%;
    margin: 0 auto;
}

#nav, li {
    display: inline;
    margin-right: 10%;
 }


 header img {
    width: 50%;
    display: block;
    margin: 0 auto; 
 }


footer li {
    padding: 15px;
    margin-top: 100px;
    display: inline;
}

.social_icons {
    width: 5%;
    margin: 20px;
}
#body {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 90%;
    margin: 0 auto;
    height: 900px;
}

#box_left {
    float: left;    
    width: 48%;
    height: 100%;
}

#box_left, p {
    text-align: center;
}

#box_right {
    float: right;   
    width: 48%;
    height: 100%;
}
#box_right, p {
    text-align: center;
}
#store {
    font-size: 22px;
    font-weight: 800;
}
footer {
    text-align: center;
    margin: 0 auto;
    width: 90%;
    height: 100px;
}