What is wrong with my nav? - html

Question

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>Gift Baskets and Catering</li>
<li>Tasting Calendar</li>
<li>Membership</li>
<li>Special Events</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;
}

Answer 1

Not sure what you are after, but you might want to change this selector:
#nav, li {
display: inline;
margin-right: 10%;
}
to this:
#nav li {
display: inline;
margin-right: 10%;
}
(no comma after #nav- otherwise those settings apply both to #nav AND to all li elements on that page)