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:
<!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>
#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;
}