title: Center Website On All Screen Sizes
body: <p>I need help centering my webpage on small screen sizes. My site looks fine at its normal width of 989px, but when it gets smaller it gets pushed to the left and there's a lot of white space on the right. I've been trying many ways to fix this but nothing works. </p>
  
  <p>Now it's up to you guys. Hope you can help.</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;style media="screen" type="text/css"&gt;
  *{
     margin:0;
     padding:0;
  }
  
  body{
     text-align:center; /*For IE6 Shenanigans*/
     min-width:989px;
     margin:0;
     padding:0;
  
  }
  
  #header{background:url(/images/header.png) no-repeat;
  border:;
  padding:50px 0px 50px 0px;
  text-indent:-9999px;
  width:100%;
  background-size:cover;
  
  }
  #menu{background:url(/images/nav-slice.png) repeat-x;
  border:;
  width:100%;
  background-size:100%;
  padding-bottom:20px;
  padding-top:15px;
  -moz-box-shadow: 0px 2px 2px 0px #888; 
  -webkit-box-shadow: 0px 2px 2px 0px #888; 
  box-shadow: 0px 2px 2px 0px #888; 
  }
  
  ul{padding:0;
  margin:0;
  overflow:hidden;
  list-style-type:none;
  
  }
  
  li{
  
  float:left;
  display:inline-block;
  padding-left:17%;/*70 divided by 800*/
  padding-right:8%;
  font-size:1em;
  
  }
  
  a.ali{text-decoration:none;
  color: white;
  padding-top:10px;
  padding-bottom:0px;
  text-align:center;
  font-family:helvetica;
  font-weight:bold;
  font-size:1em;
  
  }
  
  a.ali:hover{color:blue;
  }
  
  #content{
  
  padding:180px 0px 0px 0px;
  
  float:left;
  width:100%;
  margin-top:20px;
  margin-left:4.044%;/*40px*/
  margin-right:2.022%;/*20px*/
  margin-bottom:0px;
  }
  
  
  #footer{background:url(/images/footer-slice.png) repeat-x;
  padding:15px 0px 15px 0px;
  border:;
  float:left;
  width:100%;
  margin-top:-40px;
  }
  
  a.tou{
  font-family:arial;
  text-size:10px;
  color:white;
  text-decoration:none;
  }
  
  a.tou:hover{
  color:blue;
  }
  
  p{
  font-family:arial;
  text-size:10px;
  color:white;
  
  }
  
  #wrapper{
  margin-left:auto;
  margin-right:auto;
  width:80%;/*989px*/
  max-width:80%;
  min-width:989px;
  -moz-box-shadow: 0px 0px 5px 5px #888; 
  -webkit-box-shadow: 0px 0px 5px 5px #888; 
  box-shadow: 0px 0px 5px 5px #888; 
  }
  
  .clear {
  clear:both;
  }
  
  .title{
  font-family:myriad pro;
  color:#2e4d9b;
  position:relative;
  bottom:180px;
  right:350px;
  }
  
  .sales-page{
  background:url(/images/sales-page.png) no-repeat;
  float:left;
  position:relative;
  bottom:140px;
  left:6%;
  padding-top:426px;
  width:100%;
  max-width:100%;
  margin-bottom:-100px;
  clear:both;
  }
  
  .get-website-now{
  background:url(/images/get-website-now.png) no-repeat;
  padding-top:40px;
  padding-bottom:40px;
  padding-left:18.20%;/*180px*/
  padding-right:18.20%;
  float:left;
  position:relative;
  bottom:230px;
  left:31%;
  margin-top:0px;
  clear:both;
  }
  .get-website-now:hover{
  opacity:0.9;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  
  &lt;div id="header"&gt;
  &lt;h1&gt;Your Name And Logo&lt;/h1&gt; 
  &lt;/div&gt;&lt;!--end header--&gt;
  &lt;div id="menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a class="ali" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="ali" href="products.php"&gt;Products&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="ali" href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!--end menu--&gt;
  &lt;div id="content"&gt;
  &lt;h1 class="title"&gt;Home&lt;/h1&gt;
  &lt;div class="sales-page"&gt;&lt;/div&gt;
  &lt;a href="products.php" class="get-website-now" style=""&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;!--end content--&gt;
  
  &lt;div id="footer"&gt;
  &lt;p&gt;&lt;a class="tou" target="_blank" href="/terms-and-conditions.html"&gt;Terms and Conditions&lt;/a&gt;&amp;nbspFive80Nine Web Design All Rights Reserved 2013&lt;/p&gt;
  &lt;/div&gt;&lt;!--end footer--&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!--end wrapper--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a link to my site: <a href="http://webdesign.five80nine.com" rel="nofollow">http://webdesign.five80nine.com</a></p>