Alinging webpage to the center and have a background

I have a page as below and i want to align it to the center and have a background color that spreads over the entire screen except the actual body of the webpage. I want to accomplish this with css. Please guide me as to how this can be accomplished


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<Style>
/*
horizontal  menu coding
 */

#nav {
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	
	
	}
#nav li {
	float: left; }
#nav li a {
	display:block;
	padding: 9px 9px;
	text-decoration: none;
	font-family:"Arial";
	color: white;
	border-right: 1px solid #ccc;
	font-size: 14px;
	background-color: #3f6fb7; }
	
}
#nav li a:hover {
	color: #3f6fb7;
	background-color: #d1cf9f; }
	
	
#nav li.current-pageHorizontal a
  {
    background:#d1cf9f;
    color: white;


}
</Style>

<Style>
/*
Print  menu coding
*/
*
Vertical  menu coding
 */
#menu  {
         width: 6.6em;
         background: #3f6fb7;
      }

#menu ul
  {
     list-style: none;
     margin: 0;
     padding: 0;
   }

#menu a, #menu h2
  {
	display:block;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	margin: 0;
	padding: 2px 3px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	font-weight: bold;
	color: #3f6fb7;
   }


#menu h2 {
           color: #fff;
           background:#3f6fb7;
        }


#menu h2 {  padding: 0;  background: transparent;}

#menu h2 a {  background: #3f6fb7;  color: white;}



h2:hover, h2:active {
 color: white;
background: black;
text-transform: none;
}


#menu a {
           color: #000;
           background: #efefef;
           text-decoration: none;
}

#menu li.current-pageHeading h2 a
   { background:#000061;
	color: yellow;}

#menu li.current-pages  a
   {
	background:#000061;
	color: yellow;
     }

#menu a:hover {
color: #a00;
background: #d1cf9f;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;
}

ul.sidenav li a:hover {
	background: #d1cf9f url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #1a4c76;
}
ul.sidenav li span{	display: none; }
ul.sidenav li a:hover span {
	display: inline;
	font-size: 0.8em;
	padding: 10px 0;
}


</Style>


<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>

<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

</style>
<![endif]-->


</head>
<body bgcolor="#FFFFFF" onLoad="preloadImages();">
<table width="684" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td valign = "top" width="106" height="1">
			<img src="../images/spacer.gif" alt = "" width="106" height="1"></td>
		<td valign = "top" width="32" height="1">
			<img src="../images/spacer.gif" alt = "" width="32" height="1"></td>
		<td valign = "top" width="72" height="1">

			<img src="../images/spacer.gif" alt = "" width="72" height="1"></td>
		<td valign = "top" width="96" height="1">
			<img src="../images/spacer.gif" alt = "" width="96" height="1"></td>
		<td valign = "top" width="97" height="1">
			<img src="../images/spacer.gif" alt = "" width="97" height="1"></td>
		<td valign = "top" width="95" height="1">
			<img src="../images/spacer.gif" alt = "" width="95" height="1"></td>
		<td valign = "top" width="85" height="1">
			<img src="../images/spacer.gif" alt = "" width="85" height="1"></td>

		<td valign = "top" width="101" height="1">
			<img src="../images/spacer.gif" alt = "" width="101" height="1"></td>
		<td valign = "top" width="1" height="1"></td>
	</tr>
	

<tr>
		<td valign = "top" width="684" height="70" colspan="8">
           <img src="../images/logo_top_aps.gif" alt = "" >
        </td>
		<td valign = "top" width="1" height="70">
			<img src="../images/spacer.gif" alt = "" width="1" height="70">
        </td>
</tr>



<tr>
  <td align="left" valign="top" bgcolor="#3f6fb7" dir="ltr">
  </td>

    <td colspan="8" >
         <ul id="nav">

               <li class = "current-pageHorizontal"> <a href="introduction.html"> Menu 1</a></li>
	           <li> <a href="Test.html">Menu 2</a></li>
	           <li> <a href="Test.html">Menu 3</a></li>
	           <li> <a href="About_Us.html">Menu 5</a></li>
       </ul>
    </td>
	</tr>


	<tr>
		<td width="106" height="300" rowspan="2" valign = "top" bgcolor="#D1D09F">
				<!---<a href="index.html"
				onmouseover="changeImages('home_arrow_aps', 'images/home_arrow_aps-over.gif'); return true;"
				onmouseout="changeImages('home_arrow_aps',  'images/home_arrow_aps.gif'); return true;">
				<img name="home_arrow_aps" src="images/home_arrow_aps.gif" alt = "" width="106" height="237" border="0"></a>
	 Laurie added --->
		
<div id="menu">
<ul>
  <li class = "current-pages" >
  <h2> <a href = "Introduction.html">A  </a></h2></li>
  </ul>
 <ul>
    <ul>
     <li> <h2> <a href = "Iss.html"> B </a></h2>


                <ul>
                      <li> <a href = "Iss.html#ID1"> C</a></li>
                      <li> <a href = "Iss.html#ID2"> D </a></li>
                      <li> <a href = "Iss.html#ID3">E</a></li>

                      <li> <a href = "Iss.html#ID4"> F</a></li>
                      <li> <a href = "Iss.html#ID5"> G</a></li>
                      <li> <a href = "Iss.html#ID6"> H</a></li>
                      <li> <a href = "Iss.html#ID7"> I</a></li>

                      <li> <a href = "Iss.html#ID8"> K</a></li>
                      <li> <a href = "Iss.html#ID9"> Coach/Help </a></li>
                      <li> <a href = "Iss.html#ID10"> M</a></li>
               </ul>

            </li>
         </ul>
      </li>
</ul>
 	

					

</div>
		<td valign = "top" width="32" height="313" rowspan="3">
			<img src="../images/r_spacer_1.gif" alt = "" width="32" height="200">
		<!--- <td valign = "top" width="546" height="44" colspan="6">
			<img src="images/aps_title.gif" alt = "" width="546" height="44"></td>
		<td valign = "top" width="1" height="44">
			<img src="images/spacer.gif" alt = "" width="1" height="44"></td>--->
	</tr>
	<tr>
		<td valign = "top" width="570" height="269" colspan="7" rowspan="1">
<font face="tahoma,  sans serif">	
<H1>&nbsp;</h1></font>
<p align="center"><font size="1" face="tahoma, sans serif">&copy; 2012  |  | <a href="index.html">Home</a> | <a href="Contact_us.cfm">Contact Us</a> | <a href="about_us_old.html">About Us</a>  | <a href="m/"> Blog</a> </font>
</td>
</tr>
</table><!--Begin SiteStats Code Oct , 23--><STYLE>.ivanC1254756683401{position:absolute;visibility:hidden;}</STYLE><DIV CLASS=ivanC1254756683401 ID=ivanI1254756683401><A HREF=http://sitetracker.com CLASS=ivanL_SI TARGET=_blank>FREE counter and Web statistics from sitetracker.com</A></DIV><script language='JavaScript' src='http://Test.sitetracker.com/cgi-bin/sitestats.gif/script/1254756683401'></script><noscript><a href='http://Test.sitetracker.com/cgi-bin/sitestats.gif/map'><img src='http://Test.sitetracker.com/cgi-bin/sitestats.gif/img' border=0></a></noscript><!--End SiteStats Code-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-738462-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</p>
</body>
</html>

Ideally, your page should be constructed with divs etc. rather than a table. Anyhow, you could center the table and give it a background color if you want. E.g.


table {width: 684px; margin: 0 auto; background: #f7f7f7;}


The best way to center a web page is to wrap the whole lot in a div and give it a width and margin: 0 auto. Then you can give that div a background color if you want.

EDIT: also write you style tags with a lower case ‘s’:

<style>

not

<Style>

That didnot do it, i will rewrite the code without tables and have a new page posted,
thanks for the help.

Ralph,

I now have the page in Div with Css for everything but i still cannot get it ( the web page) to be on the center what am i doing wrong.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Users</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="verticalmenu.css">
<link rel="stylesheet" type="text/css" href="horizontalmenu.css">
<link href="Page.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type = "text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		products2_over = newImage("images/products2-over.gif");
		case_studies2_over = newImage("images/case_studies2-over.gif");
		lean2_over = newImage("images/lean2-over.gif");
		contact2_over = newImage("images/contact2-over.gif");
		about_us2_over = newImage("images/about_us2-over.gif");
		home_arrow_aps_over = newImage("images/home_arrow_aps-over.gif");
		preloadFlag = true;
	}
}

<!-- Begin
function popUp1(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=674,height=586');");
}

function popUp2(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=750,height=440');");
}


function subMenu(show) {
if (show){
document.getElementById('sub_menu').style.display = 'block';
} else {
document.getElementById('sub_menu').style.display = 'none';
}
}


// -->
</script>

</head>
<body bgcolor="#FFFFFF" onLoad="preloadImages();" >

			<div class="ts-1-1"><img alt="" src="../images/spacer.gif" width="106" height="1"></div>
			<div class="ts-1-2"><img alt="" src="../images/spacer.gif" width="32" height="1"></div>
			<div class="ts-1-3"><img alt="" src="../images/spacer.gif" width="72" height="1"></div>
			<div class="ts-1-4"><img alt="" src="../images/spacer.gif" width="96" height="1"></div>
			<div class="ts-1-5"><img alt="" src="../images/spacer.gif" width="97" height="1"></div>
			<div class="ts-1-6"><img alt="" src="../images/spacer.gif" width="95" height="1"></div>
			<div class="ts-1-7"><img alt="" src="../images/spacer.gif" width="85" height="1"></div>
			<div class="ts-1-8"><img alt="" src="../images/spacer.gif" width="101" height="1"></div>
			<div class="ts-1-9"></div>
			<div class="ts-1-10"><img alt="" src="../images/logo_top_aps.gif" width="808" height="81" colspan="8"></div>
			<div dir="ltr" align="left" class="ts-1-12"></div>
			<div class="ts-1-13">
				<ul id="nav">
					<li class="current-pageHorizontal">
						<a href="Test.html">Test</a>
						
						<!--for the new menu -->
						<ul>
							<li><a href="Test1.html">Test2</a></li>
						</ul>
						<ul>
							<li class="current-pageHorizontal" ><a href="Test3.html">Test3</a></li>
						</ul>
						<ul>
							<li><a href="Test4.html">Test4</a></li>
						</ul>
						<ul>
							<li><a href="Test5.html"> Test5</a></li>
						</ul>
						<!--for the new menu ul under a list -->
					</li>
					<li>
						<a href="Test6.html">Test6</a>
						
					</li>
                    <li>
						<a href="contact_us.cfm">Try It Out</a>
						
					</li>
					<li>
						<a href="About_Us.html">About Us</a>
						
					</li>
			  </ul>
		  </div>

			<div class="ts-1-14">
				
<div id="menu">
					<ul>
						<li>
							<h2>
								<a href="Vertical1.html">Vertical1</a>
							</h2>
						</li>
</ul>
					<ul>
						<ul>
							<li >
								<h2>
									<a href="Vertical.html">Vertical </a>
								</h2>
								<ul>
									<li >
										<a href="Vertical1.html#ID1">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical1.html#ID2">Vertical </a>
									</li>
									<li>
										<a href="Vertical1.html#ID3">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical1.html#ID4">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical1.html#ID5">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical1.html#ID6">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical1.html#ID7">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical1.html#ID8">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical1.html#ID9">Vertical </a>
									</li>
									<li>
										<a href="Vertical1.html#ID10">Vertical</a>
										
									</li>
								</ul>
							</li>
						</ul>
					</ul>
					<ul>
						<li>
							<h2>
								<a href="8DSteps.html">Vertical </a>
							</h2>
							<ul>
								<li>
									<a href="Vertical2.html">- Vertical</a>
									
									<ul>
										<li>
											<a href="Vertical2Investigation">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Common">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Step">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2CData">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2face">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2finding">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Efficiently">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Knowledge">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2HowTo">Vertical</a>
											
										</li>
									</ul>
								</li>
								<li>
									<a href="Vertical2.html">- Verticale</a>
									
									<ul>
										<li>
											<a href="Vertical2Questions">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Attach">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Virtual">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Search">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Talk">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Coach">Vertical </a>
										</li>
										<li>
											<a href="Vertical2Actions">Vertical</a>
											
										</li>
										<li>
											<a href="Vertical2Create">Vertical</a>
											
										</li>
									</ul>
								</li>
								<li>
									<a href="Vertical.html">- Vertical</a>
									
									<ul>
										<li>
											<a href="vertical3Steps">Vertical</a>
											
										</li>
										<li>
											<a href="verticalTrack">Verticals</a>
											
										</li>
										<li>
											<a href="verticalConsult">Vertical</a>
											
										</li>
										<li>
											<a href="verticalPrevious">Vertical</a>
											
										</li>
										<li>
											<a href="verticalReport">Vertical</a>
											
										</li>
										<li>
											<a href="verticalClose">Vertical</a>
											
										</li>
									</ul>
								</li>
								<li>
									<a href="Verical.html">- Verticale</a>
									
									<ul>
										<li>
											<a href="vertical1">Verticals </a>
										</li>
										<li>
											<a href="vertical2">Vertical</a>
										</li>
										<li>
											<a href="vertical3">EVertical</a>
											
										</li>
										<li>
											<a href="vertical5">Verticale</a>
											
										</li>
										<li>
											<a href="vertical6">Verticalt</a>
											
										</li>
									</ul>
								</li>
								<li>
									<a href="Vertical.html">- Vertical</a>
									
									<ul>
										<li>
											<a href="vertical1">Vertical</a>
											
										</li>
										<li>
											<a href="vertical2">Vertical </a>
										</li>
										<li>
											<a href="vertical3">Vertical</a>
											
										</li>
										<li>
											<a href="vertical4">Vertical</a>
											
										</li>
									</ul>
								</li>
								<li>
									<a href="vertical.html">- Vertical</a>
									
									<ul>
										<li>
											<a href="vertical1">Vertical</a>
											
										</li>
										<li>
											<a href="vertical2">Vertical</a>
											
										</li>
									</ul>
								</li>
							</ul>
						</li>
</ul>
					<ul></ul>
					<ul>
						<ul>
							<li>
								<h2>
									<a href="Vertical.html">Vertical</a>
								</h2>
								<ul>
									<li>
										<a href="Vertical.html#dB1">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical.html#dB2">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical.html#dB3">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical.html#dB4">Vertical</a>
										
									</li>
								</ul>
							</li>
				    </ul>
						<ul>
							<li>
								<h2>
									<a href="Vertical.html">Verticals </a>
								</h2>
								<ul>
									<li>
										<a href="Vertical.html#b1">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical.html#b2">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical.html#b3">Vertical</a>
										
									</li>
									<li>
										<a href="Vertical.html#b4">Vertical </a>
									</li>
								</ul>
							</li>
				    </ul>
						<ul>
							<li class = "current-pages">
								<h2>
									<a href="Verrical.html">Vertical </a>
								</h2>
								<ul>
									<li>
										<a href="Verticall#atoz1">Vertical</a>
										
									</li>
									<li>
										<a href=".html#atoz2">Verticalt</a>
										
									</li>
								
								</ul>
							</li>
				    </ul>
						<ul>
							<li>
								<h2>
									<a href="Test.html">Vertical </a>
								</h2>
							</li>
				    </ul>
						<ul>
							<li>
								<h2>
									<a href="contact_us.cfm">Try It Out!</a>
								</h2>
							</li>
				    </ul>
						<li>
							<h2>
								<a href="about_us.html">About Us </a>
							</h2>
							<ul></ul>
						</li>
					</ul>
			  </div>
</div>
<div class="ts-1-16">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="Vertical.html">  </a>  <a href="Vertical.html">  </a>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <a href="Vertical.html">  </a>  <a href=Vertical.html"> </a>

 <p align="center"><font size="1" face="tahoma, sans serif">&copy;     <a href="index.html"></a>  <a href="Contact_us.cfm"></a>  <a href="about_us.html"></a>   <a href="http://.blogspot.com/"></a></font></p>
<!--Begin SiteStats Code Oct , 23--><STYLE>.ivanC1254756683401{position:absolute;visibility:hidden;}</STYLE><DIV CLASS=ivanC1254756683401 ID=ivanI1254756683401><A HREF=http://sitetracker.com CLASS=ivanL_SI TARGET=_blank>FREE counter and Web statistics from sitetracker.com</A></DIV><script language='JavaScript' src='http://Test.sitetracker.com/cgi-bin/sitestats.gif/script/1254756683401'></script><noscript><a href='http://Test.sitetracker.com/cgi-bin/sitestats.gif/map'><img src='http://Test.sitetracker.com/cgi-bin/sitestats.gif/img' border=0></a></noscript><!--End SiteStats Code-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-738462-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</p>
</body>
</html>

You haven’t included your CSS here, so we can’t tell. It might be better to have all of the content within one wrapper div if you want the whole page to be centered. Depends on your layout, though.

Your markup has some serious issues as your writing it as if you were using a <table> element, see the below for the problems i have found:

  1. At the very start of your markup you have 10 DIV elements, 8 of which are using spacer images which is a BIG no no and 2 which are just empty. You can simply space out elements by using either margins or padding but never should you spacers and empty elements to separate elements on a page
  2. Your using a lot of symbol codes to space the left margin in your “ts-1-16” element, you should always use padding if you need to space text from the edge of an element for browser consistency
  3. You keep switching between lowercase tags to uppercase tags, you should never mix between the two and it’s bad markup and can cause cross browser issues
  4. And the lucky last thing is your using numeric entries for your CSS selectors, you should try to avoid doing so as in the long run you will simply make it harder for yourself to make changes if the id or class doesn’t match what the element is actually doing

CSS i use for the page is as below
.ts-1 {
border: none;
height: 1186px;
position: relative;
text-align: left;
width: 850px;
}

.ts-1-1 {
border: none;
height: 1px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 109px;
}

.ts-1-2 {
border: none;
height: 1px;
left: 109px;
padding: 0px;
position: absolute;
top: 0px;
width: 32px;
}

.ts-1-3 {
border: none;
height: 1px;
left: 141px;
padding: 0px;
position: absolute;
top: 0px;
width: 188px;
}

.ts-1-4 {
border: none;
height: 1px;
left: 329px;
padding: 0px;
position: absolute;
top: 0px;
width: 105px;
}

.ts-1-5 {
border: none;
height: 1px;
left: 434px;
padding: 0px;
position: absolute;
top: 0px;
width: 106px;
}

.ts-1-6 {
border: none;
height: 1px;
left: 541px;
padding: 0px;
position: absolute;
top: 0px;
width: 104px;
}

.ts-1-7 {
border: none;
height: 1px;
left: 645px;
padding: 0px;
position: absolute;
top: 0px;
width: 93px;
}

.ts-1-8 {
border: none;
height: 1px;
left: 738px;
padding: 0px;
position: absolute;
top: 0px;
width: 111px;
}

.ts-1-9 {
border: none;
height: 1px;
left: 849px;
overflow: hidden;
padding: 0px;
position: absolute;
top: 0px;
width: 1px;
}

.ts-1-10 {
border: none;
height: 74px;
left: 258px;
padding: 0px;
position: absolute;
top: 50px;
width: 844px;
}

.ts-1-11 {
border: none;
height: 74px;
left: 849px;
padding: 0px;
position: absolute;
top: 1px;
width: 1px;
}

.ts-1-12 {
background-color: #3f6fb7;
border: none;
height: 68px;
left: 256px;
overflow: hidden;
padding: 0px;
position: absolute;
text-align: left;
top: 131px;
width: 110px;
}

.ts-1-13 {
border: none;
height: 89px;
left: 366px;
padding: 0px;
position: absolute;
top: 131px;
width: 738px;
}

.ts-1-14 {
background-color: #d1d09f;
border: none;
height: 3750px;
left: 254px;
padding: 0px;
position: absolute;
top: 201px;
width: 111px;
}

.ts-1-15 {
border: none;
height: 1043px;
left: 109px;
padding: 0px;
position: absolute;
top: 143px;
width: 32px;
}

.ts-1-16 {
border: none;
height: 1042px;
left: 369px;
padding: 0px;
position: absolute;
top: 223px;
width: 500px;
}

.ts-1-17 {
float:right;
border: none;
position: absolute;
height: 1200px;
left: 641px;
padding: 0px;
width: 190px;
top: 119px;
}

That’s not enough CSS to really understand your page, except that you are using position: absolute with left positioning, which is not the way to center a site.

Instead, wrap everything in a container div, and give it a width and set its margins to 0 auto. E.g:

.wrapper {
  width: 960px;
  margin: 0 auto;
}

Make sure to take note of the comments above, too, as your HTML needs a lot of cleaning up. :slight_smile: