CSS se comporta de modo extraño (estándar, en navegador decente)

[shock_unown]

Aiya!

Quiero hacer que un <ul> ocupe de lado a lado del bloque en el que está contenido, con un color de fondo. El bloque en el que está contenido tiene width: 80%, y el ul, 100% (para que ocupe de lado a lado). Peero, resulta que el ul se "sale" del bloque por la derecha, como si le hubiese puesto 120% o algo así. ¿Por qué? Aquí os dejo los códigos:

El <ul> en cuestión

Código:

#menu ul {
		width: 100%;
		background-color: aqua;
		padding: 10px;
}

El bloque en el que está contenido

Código:

#pagina {
		width: 80%;
		padding: 0;
		margin: 0;
		text-align: center;
		border: 2px solid black;
}

HTML

Código HTML:

<div id="pagina">
	<h1 id="titulo"><?php print($blog->titulo); ?> &raquo; Panel</h1>
	
	<div id="menu">
	<ul>
		<li><a href="index.php">General</a></li>
		<li><a href="index.php">General</a></li>
	</ul>
	</div>
	
	<div id="contenido">Ejemplo</div>
</div> 

Y aquí podéis ver la página: yavenim.no-ip.org/ClicBlog/panel/

[webosiris]

aquí explican el modelo de cajas... eliminá el width 100% y probá con "display:block;" a ver que pasa... otra idea que se me ocurre es eliminar el padding de #menu ul y agregarlo en #menu li

Y aquí podéis ver la página: yavenim.no-ip.org/ClicBlog/panel/

por el momento no funciona.. parece que tenés apagada la máquina.

[shock_unown]

Aiya!

¡Bien! Ya funciona :) Gracias.

Aunque no entiendo por qué width: 100% no funciona como se esperaría. ¿Alguien nos da una pista?

[webosiris]

¡Bien! Ya funciona :) Gracias.

Aunque no entiendo por qué width: 100% no funciona como se esperaría.

en realidas SI funciona como debería... la pista está en el modelo de cajas que mencioné + arriba...
ancho total = width + padding + border + margin