Foros del Web - Problema con menu, no encuentro el error!!!!!!!!!

Tengo el mismo problema que otro chaval que escribio sobre el mismo tema.

Lo que pasa es que a mi eso no me ha solucionado nada.

Tengo un menu que es una lista, bueno os dejo el codigo y a ver si sois capaces de hacerme ver mi error.

Os dejo el codigo para que le echeis un vistazo. Yo lo que quiero es que el menu (lista) ocupe todo el espacio del div menu (180px). He puesto el fondo del div menu en rojo para que os deis cuenta de que no se rellena completamente.

<html>
<head>
<title>Prueba menu con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#container
{
text-align: left;
width: 770px;
background-color: #FFFFFF;
margin: auto;
}
#bordemenu
{
border: 1px solid #CCCCCC;
}
#menu
{
padding-top: 5px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
width: 180px;
background-color:#FF0000;
}
#menu ul
{
width: 180px;
list-style:none;
margin: 0px auto;
}
#menu ul li
{
background-color: #F5F7F9;
padding: 6px;
text-align:left;
vertical-align:middle;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
#menu ul li.cabeceraMenu
{
font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #123344;
padding: 6px;
text-align:center;
vertical-align:middle;
height:10px;
border-top: 1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}

#menu ul li a,a:link,a:visited,a:active{
font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #123344;
text-decoration: none;
}

#menu ul li a:hover{
font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #00FF00;
text-decoration: none;
}
</style>
</head>

<body>
<div id="container">
<div id="menu">
<ul>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</div>
</div>
</body>
</html>