Problèmes avec mon menu

Bonjour,

Je souhaite refaire le design de mon site alors j'ai créé une page de test afin d'y mettre plein de choses pour voir à quoi ça ressemblera. Je modifierais peut être encore un peu les couleurs mais j'ai deux petits soucis au niveau de mon menu.

La page :
http://www.fan-de-mixmaster.legtux.org/test1.html

Le premier :
Le grand cadre blanc avec le contenu de la page est centré, on voit donc très clairement que le texte dans le menu est un peu décalé à droite. J'ai essayé de modifier plusieurs choses mais ça n'a rien changé.

Le second :
J'aimerais que mon menu ait la même largueur de mon cadre blanc.

HTML du menu :

<div id="navbar_ex4">
<ul>

<li><a href="#">Exemple 1</a></li>

<li><a href="#">Lien 2</a></li>

<li><a href="#">Lien 3</a></li>

<li><a href="#">Lien 4</a></li>

<li><a href="#">Lien 5</a></li>

<li><a href="#">Lien 6</a></li>

</ul>
</div>

CSS du menu :

#navbar_ex4 {
    background-color: #888888;
    float: left;
    width: 100%;

}

#navbar_ex4 ul {
    color: #FFFFFF;
    font-family: tahoma, verdana, geneva, arial, sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
}

#navbar_ex4 ul li {
    display: inline;
}

#navbar_ex4 a {
    background-color: #888888;
    border-right: 1px solid #696969;
 border-left: 1px solid #696969;
    color: #FFFFFF;
    padding: 0.2em 12px;
    text-decoration: none;
}

#navbar_ex4 a:hover {
    background-color: #777777;
    color: #FFFFFF;
}

Pouvez vous m'aider ?
Merci d'avance

Oups j'ai oublié :

CSS du cadre blanc :

#cadre{
 background: #fff;
 color: #555;
 font-family: "Open Sans", sans-serif;
 margin: 10px auto 10px;
 padding: 20px 20px 10px 20px;
 max-width: 900px;
 -webkit-font-smoothing: subpixel-antialiased;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 }

Edit :
Je viens de trouver pour pour la largueur du menu, il suffisait de le mettre dans la div "cadre".

Cependant il ne prend pas toute la largueur du cadre ...