[Resolvido] Dificuldade menu esticado

ola, tenho um site deste jeito:

<div id="box">
.
.
.
</div>

 <div id="menu">
 <ul>
 <li><a href="?pag=home" class="separador">Início</a></li>
 <li><a href="?pag=cursos" class="separador">Serviços</a></li>
 <li><a href="?pag=metodo" class="separador">Reservas</a></li>
 <li><a href="?pag=profissionais" class="separador" >Programação</a></li>
 <li><a href="?pag=empresa" class="separador" >A Empresa</a></li>
 <li><a href="?pag=localizacao" class="separador" >Localizaçao</a></li>
 <li><a href="?pag=contato" class="separador" >Contato</a></li>
 </ul>
 </div>

<div id="box">
.
.
.

esse box esta com width de 992px e o menu esta com width de 100%, beleza, o menu fica com o bg na pagina toda mas o texto fica lá <<<<<<< colado, ja botei padding e margin em tudo e n vai '-'

#menu{
background:#008CBB;
float:left;
width:100%;

}

#menu ul {

margin:0;
padding:0;
float:left;
list-style:none;
background-color:#008CBB;

}

#menu ul li {

display: inline;

}

#menu ul li a {

text-decoration:none;
color:#FFF;
font:bold 20px Arial, Helvetica, sans-serif;
float:left;
padding:8px 20px 8px 18px;

}

#menu ul li a:hover{

text-decoration:underline;
}

obrigado