Coding Help. White Margin on Side of Site - Class Issue?

[chrislowndz]

Hello,I've been tring to problem solve a site I'm working on with no luck. It seems as though when I start pulling in the width of a broswer around 1000px a white margin appears on the right as well as a big white area on the bottom. What I'd like to do is for the color blocks to stay full width and the text return down as the site is pulled in (adaptive?). I can see the issue more so on a tablet or phone. I have a feeling it's probably a combo of a couple of things or more. My html/css knowledge is very new so I'm struggling but I'm excited to learn everything. Site:www.chrisandcaitlin.com Thank you for any tips! Much appreciation.-Chris HTML

  <div id="header">	<div id="section0"></div>	<div id="logo">	  <a href="#section0"></a>	</div>	<ul id="menu">	  <li>		<a href="#section1">WEDDING DETAILS</a>	  </li>	  <li>		<a href="#section2">TRAVEL</a>	  </li>	  <li>		<a href="#section3">REGISTRY</a>	  </li>	  <li>		<a href="#section4">CONTACT US</a>	  </li>	</ul></div>  <div id="container">   <div id="main">	<div class="background3">	<img class="stretch2" src="images/Engagement-Chris-0003_noarrows.jpg">	<div id="section1"></div>	  <div class="details1">	<img class="stretch" style="position:relative; background:#1299A9" alt="background" src="images/grainOR.png">		<div id="details">	<img alt="details" src="images/weddingdetails.png">	<p>Both wedding and reception will be held at Magnolia Hall at Piedmont Park in Atlanta, Georgia.	  Our ceremony will take place at 5:00pm, and the reception will immediately follow.</p>	<h2>DATE</h2>	<p>May 4th, 2013</p>	<h2>PLACE</h2>	<p>	  Magnolia Hall at Piedmont Park	  <br>	</p><h2>LOCATION</h2>	<p>	  600 Evelyn Street NE Atlanta, Ga 30306 <a href="http://goo.gl/maps/P3YJD" target="_blank">(Google Maps)</a> </p>	<h2>DRESS CODE</h2>	<p>Semi-Formal</p>	 </div></div>	<div id="section2"></div>	  <div class="travel2">		<img class="stretch" style="background:#E6E6E6;" alt="background" src="images/grain.png">		<div id="travel">		  <img alt="travel" src="images/travel.png"><p>We have a block of rooms listed under “Scannell/Lowndes Wedding Room Block” for Friday and Saturday evenings at the Atlanta Marriott Suites Midtown at $119/night.</p><p>You may call the hotel directly at 404-876-8888 or 800-228-9290 to reserve a room within the block prior to April 12 to receive this rate. After April 12, you may still make reservations subject to availability but at the hotel's prevailing rates.</p><p>Check-in time is 4:00 pm on the day of arrival. Check out is 12:00 noon on the day of departure. If early arrivals and late departures are necessary, please let them know in advance, and they will make every effort to accommodate your request.</p><p> <a href="http://www.marriott.com/hotels/travel/atlms?groupCode=SLWSLWA&app=resvlink&fromDate=5/3/13&toDate=5/5/13" target="_blank">Marriott Hotel Link</a> </p><p>		</p></div></div> <div id="section3"></div>	  <div class="registry3">		<img class="stretch" style="background:#E6E6E6;" alt="background" src="images/grainblue.png">		<div id="registry">		  <img alt="registry" src="images/registry.png">  </div></div> <div id="section4"></div>	  <div class="contactus4">		<img class="stretch" style="background:#E6E6E6;" alt="background" src="images/graindkgreen.png">		<div id="contactus">		  <img alt="registry" src="images/contactus.png">		<p><a href="mailto:caitlinloveschris@gmail.com?Subject=Wedding%20Inquiry">Send Mail</a></p>  </div> </div></div> 	    </div></div>

CSS:

@charset "UTF-8";@font-face {	font-family: "LeagueGothicRegular";	font-style: normal;	font-weight: normal;	src: url("league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("league_gothic-webfont.woff") format("woff"), url("league_gothic-webfont.ttf") format("truetype"), url("league_gothic-webfont.svg#LeagueGothicRegular") format("svg");}@font-face {	font-family: "LeagueGothicRegular";	font-style: normal;	font-weight: normal;	src: url("league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("league_gothic-webfont.woff") format("woff"), url("league_gothic-webfont.ttf") format("truetype"), url("league_gothic-webfont.svg#LeagueGothicRegular") format("svg");}@font-face {	font-family: "DejaVuSerifBold";	font-style: normal;	font-weight: normal;	src: url("dejavuserif-bold-webfont.eot?#iefix") format("embedded-opentype"), url("dejavuserif-bold-webfont.woff") format("woff"), url("dejavuserif-bold-webfont.ttf") format("truetype"), url("dejavuserif-bold-webfont.svg#DejaVuSerifBold") format("svg");}@font-face {	font-family: "DejaVuSerifBoldItalic";	font-style: normal;	font-weight: normal;	src: url("dejavuserif-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("dejavuserif-bolditalic-webfont.woff") format("woff"), url("dejavuserif-bolditalic-webfont.ttf") format("truetype"), url("dejavuserif-bolditalic-webfont.svg#DejaVuSerifBoldItalic") format("svg");}@font-face {	font-family: "DejaVuSerifItalic";	font-style: normal;	font-weight: normal;	src: url("DejaVuSerif-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("DejaVuSerif-Italic-webfont.woff") format("woff"), url("DejaVuSerif-Italic-webfont.ttf") format("truetype"), url("DejaVuSerif-Italic-webfont.svg#DejaVuSerifItalic") format("svg");}@font-face {	font-family: "DejaVuSerifBook";	font-style: normal;	font-weight: normal;	src: url("dejavuserif-webfont.eot?#iefix") format("embedded-opentype"), url("dejavuserif-webfont.woff") format("woff"), url("dejavuserif-webfont.ttf") format("truetype"), url("dejavuserif-webfont.svg#DejaVuSerifBook") format("svg");}#menu li a {	color: #FFFFFF;	text-decoration: none;}#header {	background-color: #1299A9;	height: 128px;	position: fixed;	top: 0;	width: 100%;	z-index: 10;}.oneColElsCtr #container img {	margin-top: 40px;}.oneColElsCtr #mainContent {	padding: 0 20px;}#menu {	color: #EB4F50;	font-family: LeagueGothicRegular;	font-size: 24px;	height: 60px;	left: 25%;	list-style: none outside none;	margin: auto;	position: relative;	top: -118px;	width: 700px;	z-index: 200;}#menu li {	float: left;	list-style: none outside none;	margin-left: 50px;}#logo {	background-image: url("images/candclogo.png");	background-repeat: no-repeat;	height: 164px;	margin: auto;	position: relative;	text-align: left;	width: 1000px;	z-index: 110;}body {	color: #000000;	font: 100% Verdana,Arial,Helvetica,sans-serif;	margin: 0;	padding: 0;	text-align: center;}#section1 {	position: relative;	top: -153px;}#section2 {	position: relative;	top: 400px;}#section3 {	position: relative;	top: 1000px;}#section4 {	position: relative;	top: 1300px;}#main {	height: 746px;	margin: auto;	position: absolute;	top: 0;	width: 100%;}#main2 {	height: 800px;	margin: auto;	position: absolute;	top: 212px;	width: 100%;}.stretch2 {	max-width: 100%;	z-index: -10;}.stretch {	height: 800px;	max-width: 100%;}.stretch3 {	max-width: 100%;	z-index: 10;}.background {	float: left;	height: 800px;	left: 0;	overflow: hidden;	position: relative;	top: 0;	width: 100%;	z-index: -3;}.background2 {	float: left;	height: 800px;	left: 1600px;	position: relative;	top: 0;	width: 100%;	z-index: -3;}.background3 {	float: left;	height: 800px;	max-width: 100%;	position: relative;	top: 116px;	z-index: -3;}.details1 {	float: left;	height: 570px;	max-width: 100%;	position: relative;	top: 0;	z-index: -3;}.travel2 {	float: left;	height: 570px;	left: 0;	max-width: 100%;	position: relative;	top: 0;	z-index: -3;}.registry3 {	float: left;	height: 311px;	left: 0;	max-width: 100%;	position: relative;	top: 0;	z-index: -3;}.contactus4 {	float: left;	height: 570px;	left: 0;	max-width: 100%;	position: relative;	top: 0;	z-index: -3;}.main0 {	float: left;	height: 800px;	position: relative;	top: 116px;	width: 100%;	z-index: -3;}#details {	height: 800px;	margin: auto;	position: relative;	top: -830px;	width: 1000px;}#details_heading {	top: 0;}#details p {	color: #FFFFFF;	font-family: "DejaVuSerifItalic",Times,serif;	font-size: 19px;	left: 50px;	line-height: 28px;	margin-right: 50px;	position: relative;	text-align: left;	top: 20px;	width: 60%;}#details p img {	float: left;	left: -40px;	margin-top: 100px;	position: relative;	top: 0;	width: 500px;}#details a {	color: #FFFFFF;	letter-spacing: normal;	position: relative;	text-decoration: none;	z-index: 200;}#details a:hover {	color: #333333;}#details img {	left: -152px;	position: relative;	top: 67px;}#details h2 {	color: #474747;	font-family: LeagueGothicRegular,Helvetica;	font-size: 17px;	font-weight: normal;	left: 50px;	letter-spacing: 2px;	margin-bottom: -17px;	position: relative;	text-align: left;	top: 20px;}#details_map {	height: 800px;	left: 54%;	overflow: hidden;	position: absolute;	top: 110px;	width: 45%;}.oneColElsCtr #container {	float: left;	margin: 0 auto;	position: relative;	text-align: center;	top: 0;	width: 100%;}.oneColElsCtr #container img {	margin-top: 40px;}.oneColElsCtr #mainContent {	padding: 0 20px;}#travel {	height: 800px;	margin: auto;	position: relative;	text-align: left;	top: -753px;	width: 1000px;}#travel img {	left: 25px;	position: relative;	top: 0;}#travel p {	color: #FFFFFF;	font-family: "DejaVuSerifItalic",Times,serif;	font-size: 19px;	left: 50px;	line-height: 28px;	margin-right: 50px;	position: relative;	text-align: left;	width: 800px;}#registry {	height: 800px;	margin: auto;	position: relative;	text-align: left;	top: -753px;	width: 1000px;}#contactus {	height: 800px;	margin: auto;	position: relative;	text-align: left;	top: -753px;	width: 1000px;}#contactus p {	color: #FFFFFF;	font-family: "DejaVuSerifItalic",Times,serif;	font-size: 19px;	left: 10px;	line-height: 28px;	margin-right: 50px;	position: relative;	text-align: left;	width: 800px;}.oneColElsCtr #container {	float: left;	margin: 0 auto;	position: relative;	text-align: center;	top: 0;	width: 1000px;}.oneColElsCtr #container img {	margin-top: 40px;}.oneColElsCtr #mainContent {	padding: 0 20px;}

[Ingolme]

The source of the margin on the right is the relative positioning of the #section1 element.The margin on the bottom is caused by relative positioning on the .background3, #travel, #registry, .section4 and #contactus. Also the fact that you're not using a background color on some of your elements. Relative and absolute positioning always create problems. I believe many of your images are unnecessary as well. Instead of positioning, just write the content and let the page arrange itself. Block elements automatically take up the full width of the screen and occupy just as much height as they need.

[chrislowndz]

Thank you for your time! Very helpful. I'm going to attack fixing everything this week.Have a good one,Chris

[Ingolme]

I think you should check the background-image and background-color properties.You probably won't need most, or any, of your <img> elements.