当屏幕大小调整后，框的大小将不会相应调整

Question

我是HTML和CSS的新手，正在尝试编写响应式网站代码。但是，当我调整屏幕大小时，黑色条纹框的位置在屏幕缩小时不会向上移动。它似乎锁定了位置，它与上面的幻灯片放映之间存在差距，屏幕越缩小，屏幕越宽。我查看了这里的所有其他问题，并尝试了一下位置：相对的，但我无法让它工作。任何人都可以告诉我如何在屏幕较小的时候将盒子的位置与其余的页面元素向上移动？非常感谢你。这里是链接：

http://thehotelfrankfort.com/

HTML：

<div id="outerbeforecontent"> 
<div class="light"> 
<div class="container"> 
<div class="row"> 
<div class="twelve columns"> 
<p class="slider-desc">Centered in Frankfort’s historic Main Street, just two blocks from one of the most picturesque beaches of Lake Michigan, sits the historic Hotel Frankfort. Our 83 year-old boutique hotel boasts 17 guest rooms, all with private baths, individually controlled heating and air conditioning units and each decorated with a unique theme. An unforgettable gourmet continental breakfast is included in your stay. Our larger suites feature whirlpool tubs or sauna, two-story rooms, and even a fireplace - perfect for your spectacular Northern Michigan getaway! Feel like dining in? We have a full-scale restaurant, dining room and bar along with corporate conference facilities, with gourmet catered meals available for gatherings of up to 100. Come let us serve you in style and experience all Northern Michigan has to offer. From biking to fishing our famous salmon runs, snow skiing, sailing, or experiencing a great meal at one of our many unique restaurants, or even just watching a gorgeous sunset - Frankfort is the perfect place to explore! Whatever your pleasure, you’ll be charmed by the Hotel Frankfort’s blend of old world graciousness, modern-day amenities and peerless personalized service.</p> 
<div id="pic"><img src="images/hotel_frankfort_logo_snippet.png"></img> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 

CSS：

#outerbeforecontent{ text-align: center; margin-top:-50px; width:100%; overflow:auto;} 
#outerbeforecontent h1{ line-height:normal; font-weight:normal;} 
.light{ padding: 56px 0px 0px;} 

Answer 1

你指定的529px固定margin-top值<div class="promotion">这就是为什么有一个固定的即使在调整屏幕尺寸时，滑块与黑色剥离框之间的间隙也会缩小。您可以替换的margin-top与同等比例的那个值将是：

.promotion { 
    text-align: center; 
    margin-top: 41%; 
} 

您也可以使用CSS3 @media-queries在这里指定当5个圈是直列不同margin-top值和不同margin-top值当5个圆圈堆叠成一行时（浏览器窗口< 768px）。