Меню "Закладки" по размеру блока

[Chesse]

Я пытаюсь сделать меню заезжающих друг на друга закладок, но у меня не получается сделать их по размеру блока. 

Вот так это должно выглядень:

Видите, одна закладка как бы заезжает на другую. И при этом они равномерно распределены по блоку. А у меня происходит смещение. Увеличение размеров блоков-закладок или изменение самого блока результатов не принесли. У меня получается так:

Уже всё перепробовала, не получается сделать, как надо. Может я вообще не в ту степь ушла, но помогите, пожалуйста, сделать меню как надо. 

Код html:

<var> <!-- 2 -->          <div id="m1"> <!-- 2.a -->          Главная <br/>          страница          </div>          <div id="m2"> <!-- 2.b -->          Блок 1          </div>          <div id="m3"> <!-- 2.c -->          Блок 2          </div>          <div id="m4"> <!-- 2.d -->     Блок 3     </div>     <div id="m5"> <!-- 2.e -->     Блок 4     </div>     <div id="m6"> <!-- 2.f -->     Блок 5     </div>     <div id="m7"> <!-- 2.g -->     Блок 6     </div>     <div id="m8"> <!-- 2.h -->     Блок 7     </div>     <div id="m9"> <!-- 2.h -->     Блок 8    </div></var><div id="content"> <!-- 3 -->    <div id="contex_meny"> <!-- 3.a -->    </div>    <div id="text"> <!-- 3.b -->    </div> </div> 

Код css:

var {	display: block;	width: 840px;	height: 45px;	text-align: center;	font-style: normal;	font-weight: bold;	text-shadow: white 0 1px 0, white 0 -1px 0,         white -1px 1px 0, white 1px -1px 0;	vertical-align: center;	margin:0 auto;}	#m1 {		width: 11%;		height: 100%;		float:left;		background-color: red;		-moz-border-radius: 10px 20px 0 0; /* закругление для старых Mozilla Firefox */		-webkit-border-radius: 10px 20px 0 0; /* закругл. для старых Chrome и Safari */		-khtml-border-radius: 10px 20px 0 0; /* закр.для брауз.Konquerer сист. Linux */		border-radius: 10px 20px 0 0; /* закругление углов для всех, кто понимает */		position: relative;	}	#m2 {		width: 11%;		height: 45px;		float:left;		background-color: #ff8c00;		line-height:37px;		position: relative;		right: 20px;	}	#m3 {		width: 11%;	        height: 100%;		float: left;		background-color: yellow;		line-height: 37px;		position: relative;		right: 40px;	}	#m4 {		width: 12%;		height: 100%;		float: left;		background-color: #00ff00;		position: relative;		right: 60px;	}	#m5 {		width: 11%;		height: 100%;		float: left;		background-color: #00bfff;		position: relative;		right: 80px;	}	#m6 {		width: 11%;		height: 100%;		float: left;		background-color: #0000ff;		position: relative;		right: 100px;	}	#m7 {		width: 11%;		height: 100%;		float: left;		background-color: #9400d3;		line-height:37px;		position: relative;		right: 120px;	}	#m8 {		width: 11%;		height: 100%;		float: left;		background-color: #ff1493;		line-height:37px;		position: relative;		right: 140px;	}	#m9 {		width: 11%;		height: 100%;		float: left;		background-color: red;		position: relative;		right: 160px;	}	#m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{	        -moz-border-radius: 0 20px 0 0; /* закругление для старых Mozilla Firefox */	        -webkit-border-radius: 0 20px 0 0; /* закругл. для старых Chrome и Safari */	        -khtml-border-radius: 0 20px 0 0; /* закругл.для брауз.Konquerer сист. Linux */	        border-radius: 0 20px 0 0; 	}		#m1 { z-index: 10; }		#m2 { z-index: 9; }		#m3 { z-index: 8; }		#m4 { z-index: 7; }		#m5 { z-index: 6; }		#m6 { z-index: 5; }		#m7 { z-index: 4; }		#m8 { z-index: 3; }		#m9 { z-index: 2; }#content {	float:none;	display: block;	margin:0 auto;	width: 840px;}        #contex_meny {		float:none;		background-color: #ff8c00;		height: 25px;		text-align: center;		color: white;	}	#text {		border: 3px solid #ff8c00;  		padding: 10px;	}

Перепробовала много всего, это последняя вариация при попытке решить проблему и такая же безуспешная. Что я делаю не так?

[Z1gnet]

ну собственно вот решение http://codepen.io/Z1gnet/pen/RNgPdP?editors=110

можно вставлять любое количество пунктов меню, они будут растягиваться на всю допустимую ширину.

[Chesse]

ну собственно вот решение http://codepen.io/Z1gnet/pen/RNgPdP?editors=110

можно вставлять любое количество пунктов меню, они будут растягиваться на всю допустимую ширину.

Огромное спасибо!