Что не так с моим навигатором?

Question

Все остальное на странице расширяется или сжимается при изменении размера страницы, за исключением списка, составляющего навигацию. Что я делаю не так? Как будто первый элемент привязан слева.

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; 
} 

Answer 1

Не уверен, что вы после этого, но вы можете изменить этот селектор:

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

к этому:

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

(без запятой после #nav - в противном случае эти настройки применяются как к #nav A ND до всеli элементов на этой странице)