为什么当媒体查询开始时，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并相应地调整填充和边距。