我是制作我的第一个网站的绝对初学者（此处链接到js fiddle）。
我对#about boxdiv:有一些问题
-
调整窗口大小时，上边缘向下移动，而不是保持固定。我试着用百分比代替像素，所以我不确定为什么会发生这种情况。
-
我使用媒体查询使其在不同分辨率下看起来不错，但在
max-width 750px上，尽管宽度设置为100%，但about框div不会填充屏幕的宽度。
就像我说的，我是这里的初学者，所以代码可能有点乱，而且里面确实有一些注释。如果有任何帮助，我们将不胜感激！
代码如下：
/************************************
NAVIGATION
************************************/
.logo {
float: left;
max-width: 200px
}
nav {
font-size: 20px;
text-align: center;
padding: 10px 0;
margin: 20px 0 0 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
nav ul {
list-style: none;
margin: 10px 10px;
padding: 0;
}
nav ul li {
display: inline-block;
float: right;
}
nav a {
padding: 15px 10px;
}
/*****************************************
HEADER IMAGE
******************************************/
#header-image {
display: block;
margin: 0;
}
#header-image img {
max-width: 100%;
display: block;
margin: 0;
padding: 0;
}
/*****************************************
SITE BODY
******************************************/
a {
text-decoration: none;
color: #000;
}
/*selected nav link*/
nav a:hover {
font-weight: bold;
}
/*****************************************
IMAGE
******************************************/
.hero-image img {
width: 75%;
max-height: auto;
display: block;
position: relative;
margin: auto;
padding: 0;
right: 1.5em;
top: 30px;
float: right;
z-index: -1;
}
/*****************************************
ABOUT BOX
******************************************/
#about-box {
max-width: 50%;
max-height: auto;
border: none;
background-color: #EBECE2;
text-align: center;
position: absolute;
top: /*13em;*/ 60%;
margin: /*300px 60px*/ 20% 5%;
}
h2 {
max-font-size: 28px;
font-family: helvetica, ariel;
text-align: center;
padding: 30px;
margin-top: 1em margin-bottom:0em;
}
p {
max-font-size: 20px;
text-align: center;
font-family: georgia; ariel;
font-style: italic;
padding: 30px;
margin: -3em .5em .5em 2em;
}
a:link {
text-decoration: none;
color: black;
}
/*******************************************
CTA BUTTON
*******************************************/
button {
margin: 0 0 50px;
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 1em;
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
button span {
display: block;
}
button>span {
border: 2px solid;
border-color: #979797;
padding: 0 30px;
line-height: 30px;
font-family: georgia;
font-style: italic;
font-size: 20px;
}
button:hover {
background-color: #979797;
}
/*******************************************************
DESTINATIONS
*******************************************************/
ul.rig {
list-style: none;
font-size: 0px;
margin-left: -2.5%;
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 10% 0 2.5% 2.5%;
background: #fff;
border: /*1px solid #ddd*/ none;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: /*0 0 5px #ddd*/ none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.rig li img {
max-width: 100%;
height: auto;
margin: /*0 0 10px*/ 0;
}
ul.rig li h3 {
margin: 0 0 5px;
}
ul.rig li p {
font-size: .9em;
line-height: 1.5em;
color: #999;
}
ul.rig.columns-3 li {
width: 30.83%;
}
/*RESPONSIVE CSS*/
@media ( max-width : 750px) {
#about-box {
max-width: 100%;
height: auto;
top: /*13em;*/ 30%;
margin: /*300px 60px*/ 20%;
}
.hero-image img {
display: none;
}
.rig {
margin: 300px 0;
}
}
@media ( max-width : 480px) {
ul.grid-nav li {
display: block;
margin: 0 0 5px;
}
ul.grid-nav li a {
display: block;
}
ul.rig {
margin /*-left*/: 350px 0;
}
ul.rig li {
width: 100% !important; /* over-ride all li styles */
margin: 0 0 20px;
}
#about-box {
max-width: 100%;
/*overflow: hidden;*/
height: auto;
top: /*13em;*/ 30%;
margin: /*300px 60px*/ 20% auto;
}
}<body>
<header>
<img src="http://andthenwewent.space/img/sitetitle.jpg"
alt="and then we went" class="logo">
<nav>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<div id="header-image">
<img src="http://andthenwewent.space/img/homepagebanner.jpg"
alt="and then we went" class="header">
</div>
<div id="about-box">
<h2>For Explorers</h2>
<p>&thenwewent is a collection of images, quotes and stories from
a hand-picked selection of the world’s most exotic destinations.</p>
<button>
<span><span>Read More</span></span>
</button>
</div>
<div class="hero-image">
<img src="http://andthenwewent.space/img/about-photo.jpg"
alt="about this site">
</div>
<ul class="rig columns-3">
<li><img src="http://andthenwewent.space/img/png.jpg" /></li>
<li><img src="http://andthenwewent.space/img/wildwest.jpg" /></li>
<li><img src="http://andthenwewent.space/img/amazon.jpg" /></li>
</ul>
</body>这是因为您使用
#about-box
height: auto;
top: 13em; 30%;
我只是评论了一下，一切都很好。