设置了宽度为 100% 却并没有显示出100% 的宽度

问题描述：设置了nav的宽度为100%，但却没有显示出100%的宽度。

html 布局如下：

<div class="wholepage">
<div class="top">...</top>
<div class="nav">...</div>
</div>

样式表如下：

.wholepage {
width:80%;
margin-left:10%;
margin-right:10%;
padding:0px;
}  
.top{
width:100%;
height:35%;
padding:5%;
}
.nav{
	width:100%;
	height: 5%;	
	margin: 0,auto;
	padding: 0;	
	background-color:#C1BEBF;	
	
}

结果 top 那里可以以占屏幕80% 的宽度显示，但nav 所对应的div却明显比前者短了一截，尝试 调宽度、设边距，没有用，把 nav的 宽度设为110% 时才和 top 等长。

原因：

我在 top 那里设了一个 padding:5%,   修改过后如下：

.top{
	text-align: left;
	padding-top: 5%;
	padding-bottom:5%; 
	width: 100%;
	height: 35%;
	background-color: aqua;
}
.nav{
	width:100%;
	height: 5%;	
	margin: 0,auto;
	padding: 0;	
	background-color:#C1BEBF;
	
	
}

这样便可以把nav的宽度撑开了。

但是，我去 w3school 看来下，发现 padding 并不能继承，而且 top 和 nav之间也不算是继承关系，为什么top的padding会影响到nav的呢？

在浏览器中审查元素：

可以发现， 真正的 top 本身的宽度是较深色的那个区域的（1 区），而2区其实是padding （内边距），然后padding那一部分也被填充为与top一样的颜色了。

也就是说：这与padding的继不继承无关，是 top 设置了 5% 的内边距之后把自己（即class="top"这个容器）撑大了，它其实是以110%（5%+100%+5%=110%）的宽度显示的。

所以，并不是nav 没有将100%的宽度显示出来，而是top 显示出了110% 的宽度，这样看上去好像nav 宽度没显示够。（如有不足，欢迎指正）