HTML - chevauchement de 2 blocs

Bonjour,





J'ai un petit soucis de chevauchement avec 2 blocs quand je réduis la fenêtre.

- J'ai un bloc menu
- et mon bloc de conteneur de page

Quand je réduis la fenêtre, ces 2 blocs ce chevauchent. J'ai pris 2 captures d'écran pour montrer le problème:

Quand ma fenêtre de navigation est en taille normale, tout va bien :



Mais quand je la réduis, ça donne ça :




Au niveau du CSS j'ai pour mon menu :

#menu ul
{
	list-style:none;
	float:left;
	width:200px;
	height:200px;
	margin-left: 350px;
	margin-top:40px;
	background-color:red;
}

Et pour mon bloc conteneur :

#conteneur-page
{
	width:700px;
	background-color:#102f5b;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
}

Je sais qu'il y a un problème mais je ne l'ai pas identifié.

Merci pour votre aide.