[CSS] 2 éléments se superposent

Bonsoir,

Je rencontre un problème avec l'alignement de mon menu et de mon texte. Pour que vous compreniez mieux mon problème voici 2 screens.

Le premier, l'affichage normal



Le deuxième, avec un différent niveau de zoom



Je ne vois pas du tout pourquoi ces 2 éléments se superposent.. Je vous précise que je suis débutant en HTML/CSS.

Voici mon code :

#menu
{
margin: 0;
padding: 0;
padding-top: 30px;
float: left;
width: 250px;

}

#container
{
	color: white;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 30px;
	width: 60%;
	background: #282828;
	border: 1px solid #308BC8;
	-moz-box-shadow: 10px 10px 5px 0px #000000;
	-webkit-box-shadow: 10px 10px 5px 0px #000000;
	-o-box-shadow: 10px 10px 5px 0px #000000;
	box-shadow: 10px 10px 5px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
}

Merci d'avance pour le temps que vous prendrez à m'aider!
Bonne soirée :)