HTML Center Logo/Banner Image

Okay, so I'm trying to center the logo on the Call of Duty 2 template.

My website is www.achilles.trekhost.org

Everything in the CSS file is standard, obviously the only things that have changed are the file names for the images.

In the HTML file, I've adjusted the text, header titles, links. I've tried the search here and on google and I just can't find what I need to be doing.

CSS CODE:

Code:

body {
    background-image:url(images/background.gif);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    background-repeat: repeat-x;
    background-color: #000000;
}
* {margin: 0px;padding: 0px;}
p {
    padding: 10px 10px 10px 20px;
    display:block;
    color:#525757;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold
}
a {
    color:#6b7272;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}
#container {
    margin: 0px auto;
    text-align: left;
    width: 860px;
}
#header{
    align: center;
        height:304px;
    width:777px;
    background-image:url(images/header.png);
    background-repeat: no-repeat;
        
}
#content{
}
#left{
    width:192px;
    float:left;
}
#middle{
    margin-left:206px;
    margin-right:196px;
    width:450px;
}
#right{
    width:192px;
    float:right;
}

/********************* menu ****************************/
.menuheader{
    width:192px;
    height:37px;
    background-image:url(images/menutop.gif);
    display:block;
}
.menucontent{
    width:192px;
    background-image:url(images/menumiddle.gif);
    padding-top:10px;
    background-repeat: repeat-y;
}.menuheader h3{
    padding: 10px 0px 0px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
.menufooter{
    width:192px;
    height:15px;
    background-image:url(images/menubottom.gif);
    display:block;
}
.postheader,.menuheader{
    color:#CCCCCC;
    text-transform: uppercase;
}
/********************* post ****************************/
.post{
    margin-bottom:15px;
}
.postheader{
    background-image:url(images/posttop.gif);
    display:block;
    width:450px;
    height:33px;
}
.postheader h1{
    padding: 7px 0px 0px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.postcontent{
    background-image:url(images/postmiddle.gif);
    background-repeat: repeat-y;
    padding: 20px 0px;
}
.postfooter{
    background-image:url(images/postbottom.gif);
    background-repeat: no-repeat;
    display:block;
    width:450px;
    height:15px;
}
/********************* header ****************************/
#header{
    position:relative;
}
#header ul{
    position:absolute;
    top:250px;
    display:block;
    left:190px;
}
#header ul li{
    display:inline;
    text-align:center;
    margin:auto;
    width:auto;
    border-right: 1px solid #6b7272;    
}
.last{
    border-right: 0px none #6b7272 !important;
}
#header ul li a{
    display:inline;
    text-align:center;
    text-decoration:none;
    padding: 10px 10px;
    text-transform: uppercase;
}
#header ul li a:hover{
    text-decoration:underline;
}
/********************* footer ****************************/
#footer{
    width:850px;
}
#footer ul{
    display:block;
    margin-left:190px;
}
#footer ul li{
    display:inline;
    text-align:center;
    margin:auto;
    width:auto;
    border-right: 1px solid #6b7272;    
}

#footer ul li a{
    display:inline;
    text-align:center;
    text-decoration:none;
    padding: 0px 10px;
    text-transform: uppercase;
}
#footer ul li a:hover{
    text-decoration:underline;
}
#footer span{
    color:#525757;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align:center;
    width:850px;
    display:block;
    padding: 15px 0px;
}
/********************* menu members ****************************/
.menu ul{
    list-style-position: inside;
    list-style-type: disc;
    padding: 0px 0px 0px 20px;
    color:#666666;
}
.menu ul li{
    padding-top: 5px;
    color:#666666;
}
.menu ul li a{
    text-decoration:none;
    padding: 0px;
    text-transform: uppercase;
}
.menu ul li a:hover{
    text-decoration:underline;
    text-transform: uppercase;
}
.member{
    display:inline;
    float:left;
    margin-left:10px;
}
.member span{
    display:block;
    text-align:center;
    padding: 2px 0px 13px 0px;
    text-transform: uppercase;

}
.member img{
    width:75px;
    height:70px;
    border: solid 2px #999999;    

}
.clear{
    clear:both;
}

HTML CODE:

Code:

<!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; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>U.S.S. Achilles</title>
</head>

<body>
<div id="container">
    <div id="header">
                <ul>
            <li><a href="http://www.achilles.trekhost.org">Join Now</a></li>
            <li><a href="http://www.achilles.trekhost.org">Personnel</a></li>
            <li><a href="http://www.achilles.trekhost.org">Ship Specs</a></li>
            <li><a href="http://www.achilles.trekhost.org">Past Missions</a></li>
            <li><a href="http://www.achilles.trekhost.org">Forums</a></li>
            <li class="last"><a href="achilles.trekhost.org">Comm Link</a></li>
        </ul>
    </div>


blah blah blah

 

My suggestion is to just wrap the header in <center></center> tags. It's an easy fix. Of course it might not look the greatest, but it does get the job done, and is XHTML valid.

You could also add align="center" in the div in the HTML itself. It would look like this:

<div id="header" align="center">