I'm having troubles for centering a menu I've done with HTML and CSS. I want to center it like the image upper it (I know you can't see it since it's located on my computer), the code I've so far:

HTML Code:
<!DOCTYPE html>
 <html lang="cat">
	<head>
		<title>Treball de Recerca</title>
		<link rel="stylesheet" type="text/css" href="style.css" />	
	</head>
	<body>
		<div id="container">
			<div id="header" align="center">
				<div id="logo">
				<a href="index.html"><img src="HEADER.png" alt="Delphic"/></a>
				</div>
				
				<div id="menu">
				<ul class="nav" align="center">
					<li><a href="index.html">INICI</a></li>
					<li><a href="">FORMULACIO</a>
						<ul>
							<li><a href='Hidrurs.html'>Hidrurs</a></li>
							<li><a href='Oxids.html'>Oxids</a></li>
							<li><a href='Peroxids.html'>Peroxids</a></li>
							<li><a href='Sals Binaries.html'>Sal Binaries</a></li>
							<li><a href='Hidroxids.html'>Hidroxids</a></li>
							<li><a href='Oxoacids.html'>Oxoacids</a></li>
						</ul>
					</li>
					<li><a href="Calcul.html">CALCUL MASSES MOLECULARS</a></li>
					<li><a href="">CONTACTE</a></li>
				</ul>
				</div>
			</div>
		</div>
	</body>
</html>
Code:
#container {
	width: 900px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;	
}

body {
	height: 100%;
	padding: 0;
	font-size: 18px;
	text-align: justify;
	color: #565656;
	background-color: #f0f0f0;
	font-family: Arial, Helvetica, sans-serif;
}


#header {
	font-size: 20px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
			
			
ul, ol {
	list-style:none;
	margin: 0;
	padding: 0;
}
			
.nav li a {
	background-color: transparent;
	color: #565656;
	text-decoration:none;
	padding:10px 12px;
	display:block;
}

.nav > li {
	float:left;
}			
			
.nav li ul {
	display:none;
	position:absolute;
	min-width:140px;
}
			
.nav li:hover > ul {
	display:block;
}
			
.nav li ul li {
	position:relative;
	background-color:#e1e1e1;
}