Menu tronqué au zoom

bonjour,

je viens chercher de l'aide car j'ai un souci quand je zoom sur mon site, j'ai une case de mon menu qui s'en va, apparemment elle cherche la fuite.
je veux que mon menu face exactement 500px de large, et que mes cases soit de tailles différentes ( car chacune des cases contient des items de taille différentes, je pourrais très bien mettre des tailles fixes mais j'aime me compliquez la tache) avec des paddings identiques dans les cases, voilà mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="wrapper">
	<div id="nav">
		<div class="menu-menu-principale-container">
			<ul id="menu-menu-principale" class="menu">
				<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-13"><a href="http://localhost/portfolio2/">Accueil</a>
				</li>
				<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://localhost/portfolio2/description/">description</a>
				</li>
				<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost/portfolio2/competences/">Compétences</a>
				</li>
				<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://localhost/portfolio2/realisations/">Réalisations</a>
				</li>
				<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-41 current_page_item menu-item-49"><a href="http://localhost/portfolio2/contact/">Contact</a>
				</li>
			</ul>
		</div>
	</div>
</div>

et mon css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
div#wrapper {
	width: 980px;
	margin: 0 auto;
	border: 1px solid #ffffff;
	overflow: hidden;
}
div#nav {
	width: 500px;
	height: 50px;
	margin: 50px 0 0 100px;
	float: left;
}
 
ul {
	width: 500px;
	height: 50px;
	overflow: hidden;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
ul li {
	float: left;   
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	border-right: 1px solid #8e8071;	
}
 
ul li a {
	color: #8e8071;
	padding: 18px 6px;
	float: left;
}
ul li:last-child {
	border-right: none; !important
}
 
ul li:hover {
	background-color: #F7EFED;
 } 
ul li a:active {
	background-color: #F7EFED;
}

merci d'avance à tous ceux qui prendront le temps de m'aider ;)

je viens de tester ton code et je ne vois pas de problème :
http://codepen.io/anon/pen/vObwOd

1 pièce(s) jointe(s)

ben c'est bizarre regarde ce que ca fait chez moi
Pièce jointe 184890

Bonjour,
ton dernier item passe visiblement à la ligne pour cause de conteneur pas assez grand, cela ne doit pas se jouer à grand chose.

Revois les dimensions et évite les px.

c'est peut-être aussi une différence qui vient du navigateur. de mon côté je n'ai pas vu ce problème avec Firefox et Chrome

bon ben j'ai augmenter la taille du conteneur , je voulais qu'il reste a 500px, mais c'est la meilleur solution je pense, merci pour votre aide ;)