Menu Dropdown devidamente centralizado porém levemente a direita

[mbastosbatera]

Olá rapaziada,

Gostaria de uma ajuda com este menu que, está com todas as tags para ser centralizado porém ele fica um pouco mais pra direita e assim saindo de centro.

Segue o código:

HTML

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

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

<section>

<header>

<nav>

<ul>

<li><a title="home" href="#home">HOME</a></li>

<li><a title="produtos" href="#produtos">PRODUTOS</a>

<ul>

<li><a title="arrozpreto" href="#arrozpreto">ARROZ PRETO</a></li>

<li><a title="arrozbasmati" href="#arrozbasmati">ARROZ BASMATI</a></li>

</ul>

</li>

<li><a title="pesquisa" href="#pesquisa">PESQUISA E INOVAÇÃO</a></li>

<li><a title="quemsomos" href="#quemsomos">QUEM SOMOS</a></li>

<li><a title="historia" href="#historia">HISTÓRIA</a></li>

<li><a title="contato" href="#contato">CONTATO</a></li>

</ul>

</nav>

</header>

</section>

</div>

</div>

CSS

#menubg {

top: 0px;

padding: 0px;

margin-top: 0em;

width: 100%;

height: 4em;

position: fixed;

z-index: 1;

opacity: 0.8;

background-color: #FFFFFF;

}

#menu {

width: 70em;

margin-left: auto;

margin-right: auto;

font: 1.200em Frutiger;

font-weight: light;

text-align: center;

}

#menu a {

color: #17490c;

text-decoration: none;

}

#menu ul {

margin-top: 0em;

list-style: none;

display: inline;

}

#menu ul li {

background-color: rgba(255, 255, 255, 0.8);

padding: 1em;

display: inline-block;

position: relative;

}

#menu ul li ul {

display: none;

position: absolute;

font-size: 0.750em;

text-align: center;

visibility: hidden;

width: 10em;

padding: 1.6em;

}

#menu ul li ul li {

display: block;

border-bottom: 0.150em solid #17490c;

}

#menu ul li:hover ul {

display: block;

visibility: visible;

}

Editado Setembro 15, 2014 por mbastosbatera

[mbastosbatera]

Caso queiram ver online segue o link: http://altodosmarins.hol.es/teste/

[luan.fagundes]

Olá, no HTML5 evite usar nas tag HTML o atributo align, pois o CSS já foi feito pra isso.

O que foi preciso fazer é colocar no CSS

body {margin:0px; padding:0px; } /*Para zerar as margens e padding de todos os elementos no BODY */

#menubg {
top: 0px;
padding: 0px;
margin-top: 0em;
width: 100%;
height: 4em;
position: fixed;
z-index: 1;
opacity: 0.8;
background-color: #FFFFFF;
}
#menu {
width: 70em;
margin-left: auto;
margin-right: auto;
font: 1.200em Frutiger;
font-weight: light;
text-align: center;

}

/* Adicionado para centralizar o menu */
#menu nav {
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
#menu a {
color: #17490c;
text-decoration: none;
}
#menu ul {
margin-top: 0em;
list-style: none;
display: inline;
}
#menu ul li {
background-color: rgba(255, 255, 255, 0.8);
padding: 1em;
display: inline-block;
position: relative;
}
#menu ul li ul {
display: none;
position: absolute;
left: -25px; /* Deixar o Submenu no centro */
font-size: 0.750em;
text-align: center;
visibility: hidden;
width: 10em;
padding: 1.6em;
}
#menu ul li ul li {
display: block;
border-bottom: 0.150em solid #17490c;
}
#menu ul li:hover ul {
display: block;
visibility: visible;
}