私のナビで何が問題になっていますか？

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そのページにある）