溢出？隨着容器尺寸變大，元素被排出

當我將「.container」中的css從「width：800px」更改爲「width：1900px」時，所有元素都會出現重擊。而橙色盒子則保持向左傾斜而不是居中。任何人都知道這是爲什麼發生？我的朋友說這可能與溢出有關，但他不確定。溢出？隨着容器尺寸變大，元素被排出

Picture1中：寬度：1900px

圖片2：寬度800像素 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; 
}

width:1900px