Just starting out with HTML and CSS and trying to create a responsive website. Running into an issue where the black striped box on my page is not moving up when I resize the screen. It appears to be stuck in place, causing a gap between it and the slide show above that widens as the screen gets smaller. I've tried using position:relative but it doesn't seem to work. Can anyone offer guidance on how to make the box move up with the rest of the page elements when the screen size is reduced? Thank you for any help. Here is the link:
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;}