Hi,
I’m new here and having an issue trying to center the black navigation bar of my page which is currently showing to the left!
Will appreciate your kickback 
Here is the HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; @david=webmaster-10" />
<title>My blog</title>
<!-- David's Blog -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_container">
<div id="page_top_panel">
<div id="page_header" style="width: 135px; height: 40px">
<div id="site_title"> </div>
<div id="slogan"> </div>
</div>
</div> <!-- end of top panel -->
<div id="page_menu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="subpage.html">About ME</a></li>
<li><a href="subpage.html">NEWSLETTER</a></li>
<li><a href="index.html">MY CV</a></li>
<li><a href="index.html">MY BLOG</a></li>
<li><a href="index.html">CONTACT</a></li>
<li><a href="#" class="lastmenu">LINKS</a></li>
</ul>
<form method="get" action="#">
<input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search" value="GO" />
</form>
</div> <!-- end of menu -->
<div id="wrap">
<div id="page_container">
<div id="page_top_panel">
<div id="page_header" style="width: 135px; height: 30px">
<div id="site_title"> </div>
<div id="slogan"> </div>
</div>
</div> <!-- end of top panel -->
<div id="topb"><p><h1>PAGE</h1></p></div>
<div id="leftb" style="width: 169px; height: 565px">
<p> </p>
<p> </p>
<p>
</div>
<div id="middleb" style="width: 520px; height: 802px">WELCOME TO MY NEW BLOG
PAGE. MY PAGE IS UNDER CONSTURTION AND IS COMING SOON. VISIT SOON AND
THANK YOU!<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </div>
<div id="rightb" style="width: 169px; height: 746px"></div>
</div> <!-- end of skeleton -->
And here is the CSS:
@david "webmaster-10";
/* CSS Document */
body {
background: #FFF;
margin: 0;
padding: 0;
}
input, select {
margin: 0;
}
#wrap {
margin: 0 auto;
width: 960px;
}
/*------------- Menu ------------------*/
#page_menu {
width: 960px;
height: 35px;
background: #000;
border-bottom: 1px solid #333;
}
#page_menu ul {
float: left;
width: 750px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}
#page_menu ul li{
display: inline;
}
#page_menu ul li a{
float: left;
padding: 0 25px;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#page_menu ul li .lastmenu{
border-right: none;
}
#page_menu li a:hover, #page_menu li .current{
color: #b3d7fc;
}
#page_menu form{
float: right;
width: 170px;
margin: 0;
padding: 5px 0 0 0;
text-align: left;
}
#page_menu form input{
width: 120px;
color: #FFFFFF;
background: #000;
height: 20px;
border: 1px solid #666;
}
#page_menu form .button{
border: none;
background: none;
color: #FFF;
font-weight: bold;
cursor: pointer;
width: 40px;
}
/* ----------------- end of menu----------------*/
#topb {
background: #FFF;
width: 960px;
height: 60px;
border-bottom: 3px solid #666;
}
#topb h1 {
margin: 0;
padding: 0;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
text-align: center;
}
#leftb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
}
#middleb {
background: #FFF;
width: 520px;
float: left;
padding: 4px;
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
font-color: #333
font-weight: normal;
}
#rightb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
border-left: 1px solid #CCC;
/* ----------------- end of skeleton----------------*/