Pessoal, por favor me ajudem!!!
Não consigo centralizar meu menu de jeito nenhum... estou a 3 dias testando as mais variadas sugestões que encontrei na internet, mas nada funcionou até o momento no meu caso.
Quem quiser acessar o site: www.goodstoreapp.com/maxrevisional
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Max Revisional</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li>
<a href="#">Quem Somos</a>
<ul>
<li><a href="empresa.html">A Empresa</a></li>
<li><a href="depoimentos.html">Depoimentos</a></li>
</ul>
</li>
<li>
<a href="#">Serviços</a>
<ul>
<li><a href="revisional.html">Ação Revisional</a></li>
<li><a href="credito.html">Recuperação de Crédito</a></li>
<li><a href="cartao.html">Negociação de Dívidas</a></li>
<li><a href="fgts.html">Revisão do FGTS</a></li>
<li><a href="videos.html">Vídeos Explicativos</a></li>
</ul>
</li>
<li><a href="simulacao.html">Simulação Gratuita</a></li>
<li><a href="duvidas.html">Dúvidas</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
CSS
/* Nav */
#nav {
position: absolute;
vertical-align: center;
right: 0px;
font-size: 1em;
text-align: center;
margin-top: 120px;
}
#nav ul li {
float: left;
line-height: 4.5em;
text-align:center;
}
#nav ul li a, #nav ul li span {
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
font-weight: 800;
letter-spacing: 0.025em;
color: #696969;
text-decoration: none;
border-radius: 5px;
padding: 0.5em 1em 0.5em 1em;
text-align:center;
}
#nav ul li > ul {
display: inline-block;
}
#nav ul li:hover a, #nav ul li:hover span {
background: #ddd;
}
#nav ul li.active a, #nav ul li.active span {
background: #fff;
}
#nav ul li.current a {
background: #ED3237;
color: #fff;
}
.dropotron {
background: #fff;
letter-spacing: 0.025em;
color: #000;
text-decoration: none;
border-radius: 6px;
padding: 0.75em 0;
min-width: 15em;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.025);
margin-top: calc(-0.75em + 1px);
margin-left: -1px;
}
.dropotron li {
border-top: solid 1px #eee;
line-height: 3em;
}
.dropotron li:first-child {
border-top: 0;
}
.dropotron li > a, .dropotron li > span {
-moz-transition: color .25s ease-in-out, background-color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out, background-color .25s ease-in-out;
-ms-transition: color .25s ease-in-out, background-color .25s ease-in-out;
transition: color .25s ease-in-out, background-color .25s ease-in-out;
text-decoration: none;
color: inherit;
display: block;
padding: 0 1.5em;
}
.dropotron li > a:hover, .dropotron li > span:hover {
background: #ddd;
}
.dropotron li.active > a, .dropotron li.active > span {
background: #eee;
}
.dropotron.level-0 {
font-size: 0.9em;
margin-left: 1.5em;
margin-top: 0;
}
.dropotron.level-0:before {
content: '';
position: absolute;
top: -0.5em;
left: 1em;
border-bottom: solid 0.75em #ffffff;
border-left: solid 0.75em transparent;
border-right: solid 0.75em transparent;
z-index: 1;
}