After adjusting the CSS in ".container" from "width:800px" to "width:1900px", all the elements become misaligned. The orange box is no longer centered and instead leans towards the left side. I'm curious if anyone knows why this is happening? A friend mentioned it could be related to overflow, but wasn't entirely sure.
Picture1: width:1900px
Picture 2: width 800px
HTML:
<div id="orangeBox">
<img src="images/logo.png" alt="Dash Logo" id="logo" />
<div id="snappyText">
<p>Ever think,"Where are the most mediocre places to eat around here? I want me some of that."</p>
</div>
<div id="response">
<p>Yeah, neither do we.</p>
</div>
<img src="images/whiteLine.png" alt="White Line" id="whiteLine" />
<img src="images/iphone.png" alt="iPhone" id="iphone" />
<img src="images/videoScreenshot.png" alt="Video Screenshot" id="videoScreenshot" />
<img src="images/appStoreWhite.png" alt="App Store" id="appStoreWhite" />
<div id="explanatoryText">
<p>Dash is the quickest way to find good places to eat. In a world with too many choices and too much information, Dash clears the clutter and offers only the best in your area.</p>
</div>
<ul id="menu">
<li><a href="http://boxoutdev.com/">Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<a href="http://twitter.com/#!/thedashapp"><img src="images/twitterGray.png" alt="twitter" id="twitterGray" /></a>
<a href="http://www.facebook.com/"><img src="images/facebookGray.png" alt="facebook" id="facebookGray" /></a>
</div><!--end orangebox-->
</div><!--end container-->
CSS:
body{
background: url(images/grayBackground.png);
}
/*orangeBox*/
#orangeBox{
background-image:url(images/orangeBackground.png);
background-repeat:no-repeat;
position:relative;
}
.container{
width:800px;
margin:0 auto;
position:relative;
}