Menu completar a tela inteira

Pessoal, não estou conseguindo fazer o menu completar a tela inteira do blog, já utilizei o width: 100%, mas mesmo assim não fica. Queria que ele ocupasse toda a parte branca horizontalmente:

Vou deixar o código abaixo:

HTML:

<nav id="menu">
<ul class="menuhorizontal">
<li><a href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
<li><a href="historia-personagens.html">História personagens</a></li>
</ul>
</nav>

CSS:

#menu{
width: 100%;
}

.menuhorizontal{
margin: 0;
padding: 0;
}

.menuhorizontal ul{ 
list-style: none;	
}

.menuhorizontal li{ 
display: inline;
float: left;
}

.menuhorizontal a{
display: block;
padding: 10px;
background-color: #ddd;
}

.menuhorizontal :hover{
background-color: #f3f3f3;
color: #333;
}