Can anyone assist with centering my webpage on small screen sizes? Everything looks good at the normal width of 989px, but once it shrinks, it shifts to the left and leaves excess white space on the right. I've tried various methods to correct this issue without success.
I'm reaching out for help from all of you now. Hopefully, someone can provide a solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style media="screen" type="text/css">
*{
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;
}
</style></head><body>
<div id="wrapper">
<div id="header">
<h1>Your Name And Logo</h1>
</div><!--end header-->
<div id="menu">
<ul>
<li><a class="ali" href="index.html">Home</a></li>
<li><a class="ali" href="products.php">Products</a></li>
<li><a class="ali" href="contact.php">Contact</a></li>
</ul>
</div><!--end menu-->
<div id="content">
<h1 class="title">Home</h1>
<div class="sales-page"></div>
<a href="products.php" class="get-website-now" style=""></a>
</div><!--end content-->
<div id="footer">
<p><a class="tou" target="_blank" href="/terms-and-conditions.html">Terms and Conditions Five80Nine Web Design All Rights Reserved 2013</a></p>
</div><!--end footer-->
<div class="clear"></div>
</div><!--end wrapper-->
</body>
</html>
Visit my site here: