爲什麼當媒體查詢開始時，nav會離開屏幕左側？

Question

當屏幕低於450像素時，徽標會消失以提供導航空間，但導航會在屏幕左側離開約20像素。

http://codepen.io/briligg/pen/emwXaw?editors=110

我相信這是相關的代碼 - 我可能已經包括超過必要的。 CSS：

@media screen and (max-width: 450px) { 
    img#logo { 
    display: none; 
    width: 0; 
    } 
    nav { 
    width: 100%; 
    min-width: 100%; 
    } 
} 
div#top{ 
     position: fixed; 
     top: 0px; 
     width: 100%; 
     height: 130px; 
     z-index: 5; 

} 
img#logo { 
     border: 0; 
     float: left;  
     width: 20%; 
     margin-right: 2%; 
     margin-left: 2%; 
     margin-top: 5px; 
     max-width: 123px; 
     } 


nav {  position: fixed; 
      top: 0px; 
      right: 0px; 
      width: 70%; 
      float: right; 
      padding: 2%; 
      height: 60px; 
      max-height: 60px; 
      margin: 5px 5px; 
      } 
nav button { 
      padding: 0 4px; 
      height: 28px; 
      font: 16px; 
} 

nav button ul { 
      position: relative; 
      display: none; 
} 

nav button:hover ul, nav button:focus ul { 
      display: block; 
      z-index: 6; 
      list-style: none; 
      padding: 4px; 
} 

nav button:hover li, nav button:focus li { 
      padding: 4px; 
} 
nav a { 
     text-decoration: none; 
     color: white; 
} 
nav a:hover, nav a:focus { 
      color: #9dab71; 
} 

這裏是相關的HTML：

<div id="top"> 
<a href="default.html"><img id="logo" src="http://www.briligg.com/images/briligg-loopless-blue.png" 
alt="briligg home" /></a> 
<nav> 
<button><a href="futuremoon.html#begin">Purpose</a></button> 
<button><a href="moonvsmars.html">Moon vs Mars</a> 
    <ul> 
    <li><a href="moonvsmars.html#ambiance">Ambiance</a></li> 
    <li><a style="border-bottom: 1px solid #666666;" href="moonvsmars.html#communication">Communication</a></li> 
    <li><a href="thereandback.html">There and Back</a></li> 
</ul> 
</button> 
<button><a href="beingthere.html">Being There</a> 
<ul> 
     <li><a href="beingthere.html#domination">World Domination</a></li> 
     <li><a href="beingthere.html#chickens">Chickens</a></li> 
     <li><a href="beingthere.html#gravity">Down with Gravity</a></li> 
     <li><a href="beingthere.html#moonstar">The Moonstar</a></li> 
     </ul> 
</button> 
</nav> 
</div> 

Answer 1

你給了nav元素min-width 100的％...因爲盒模型的工作方式，添加填充和保證金這會迫使元素比視口更寬。

您可以通過將box-sizing: border-box;添加到您的導航元素來修復它。這將強制將任何填充或邊框作爲寬度包含在內。查看更多詳情here。

我建議您閱讀箱型的工作原理w3schools並相應地調整填充和邊距。