non riesco centrare il menu alla pagina, per tutti i browser e risoluzioni

questo è 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; charset=utf-8" />
<title>onlinecasevacanze</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();

var submenu = $(this).parent().next();

submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});

submenu.stop().slideDown(300);

submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>

</head>

<body>

<div id="logo">
[img]img/logo.jpg[/img]
</div>
<div id="container">


<ul>[*]HOME

[/list]

<ul>
[*]CASEVACANZE
[/list]

<ul>[*]FOTO
[/list]

<ul>[*]GUIDE

<li class="sublinks">
EMILIA-ROMAGNA

TOSCANA
CAMPANIA
PUGLIA
SARDEGNA

[/list]

<ul>[*]SERVIZI
[/list]
<ul>[*]CONTATTI[/list]
</div>



</body>
</html>

questo è css :
@charset "utf-8";
/* CSS Document */
body {
margin:0px auto 0px auto;
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;

}

#logo {
float:left;
margin:15px 0px 0px 41px;
}

#container
{

float:left;
text-align:center;
margin:0px auto 0px auto;
width:100%;

}

ul
{
list-style:none;
}


ul li
{
display:inline;
float:left;

}

ul li a
{
color: #F60;
background:#FFF;
margin-right:5px;
font-weight:bold;
font-size:12pt;
font-family:verdana;
text-decoration:none;
display:block;
width:135px;
height:25px;
line-height:25px;
text-align:center;
border: 1px solid #560E00;
}

ul li a:hover
{
color:#cccccc;
background: #F63;
font-weight:bold;
text-decoration:none;
display:block;
width:135px;
text-align:center;
border: 1px solid #000000;

}

ul li.sublinks a
{
color:#F60;
background:#FFF;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:150px;
text-align:center;

}

ul li.sublinks a:hover
{
color:#000000;
background:#F63;
font-weight:normal;
text-decoration:none;
display:block;
width:150px;
text-align:center;

}

ul li.sublinks
{
display:none;

}






come devo procedere ?

grazie