html cssのページで、menuのwidthが広がらない

<!DOCTYPE html> <head><link rel="stylesheet" href=".css" type="text/css" /></head> <body> <div class="wrapper"> <div class="header"> <div class="headerblack"> <marquee>〇コカ・コーラ製品をいつもご愛用いただきありがとうございます。<img src="079.png" style="width:20px;height:20px;margin-top:9px;"></marquee> </div> <div class="relative"> <div class="head"> </div>

			  	<div class="headtwo">
					<p style=color:black;><marquee>抽選で２００名様に、コカ・コーラ冷蔵庫が当たる！！詳しくはサイトの最後で!</marquee></p>
				  </div>
				
			
		</div>
<div class="relativetwo">
	 <div class="menu">
			<table>
				<ul><li>HOME</li><li>製品</li><li>問い合わせ</li><li>日頃の取り組み</li><li>About Us</li></ul>
			</table>	  
		</div>		
		  <div class="maincontentstop">
			<P>What's New</P>
			<P>コカ・コーラは、今年で３０周年です。みなさまが、私たちの製品をより良く楽しんでいただけるよう、製品作りに、常に向上精神をもって、取り組んでいます。今年は、9つの新製品をリリースします。ハガキから応募いただいた方にコカ・コーラ特選キッチンテーブルを抽選で１名にプレゼントいたします。</P>
		  </div><BR>
	<div class="bordermovie">
	<iframe width="460" height="315" src="https://www.youtube.com/embed/pacCZ6pJXoc" frameborder="0" allowfullscreen></iframe>

	</div>
			<div class="sns">
					 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70px" height="70px" viewBox="0 0 300 300">
					  <defs>
					    <style>
					      .fill {fill: #3b5998;}
					    </style>
					  </defs>
					  <path class="fill" d="M283.000,-0.000 C283.000,-0.000 17.000,-0.000 17.000,-0.000 C7.853,-0.000 -0.000,7.854 -0.000,17.000 C-0.000,17.000 -0.000,283.000 -0.000,283.000 C-0.000,292.144 7.853,300.000 17.000,300.000 C17.000,300.000 161.000,300.000 161.000,300.000 C161.000,300.000 161.000,183.000 161.000,183.000 C161.000,183.000 121.000,183.000 121.000,183.000 C121.000,183.000 121.000,139.000 121.000,139.000 C121.000,139.000 161.000,139.000 161.000,139.000 C161.000,139.000 161.000,105.000 161.000,105.000 C161.000,66.251 183.432,45.000 218.000,45.000 C234.558,45.000 249.852,46.449 254.000,47.000 C254.000,47.000 254.000,88.000 254.000,88.000 C254.000,88.000 229.000,88.000 229.000,88.000 C210.201,88.000 207.000,96.891 207.000,110.000 C207.000,110.000 207.000,139.000 207.000,139.000 C207.000,139.000 252.000,139.000 252.000,139.000 C252.000,139.000 246.000,183.000 246.000,183.000 C246.000,183.000 207.000,183.000 207.000,183.000 C207.000,183.000 207.000,300.000 207.000,300.000 C207.000,300.000 283.000,300.000 283.000,300.000 C292.144,300.000 300.000,292.144 300.000,283.000 C300.000,283.000 300.000,17.000 300.000,17.000 C300.000,7.854 292.144,-0.000 283.000,-0.000 Z"/>
					</svg>
					</div>
</div>						 
	  <footer>
	  </footer>
</div>

</body> </html>

.wrapper {
width:1230px;
margin:10px;
}

.headerblack {
height:40px;width:100%;
background:black;
color:white;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳＰゴシック', sans-serif !important;
padding:3px -3px 3px 3px;
clear:both;
}

.runner {
width:15px;height:15px;
}

/*.relative {
position: relative;

}*/

.relative {
width:1228px;
height:300px;
}

.head { float:left;
border-bottom:10px solid lightgray;
background-image:url("cola.jpg");/linear-gradient( to middle,rgba(),),
url("");/
width:990px;height:300px;
}

.headtwo {
float:right;
border:10px solid lightgray;
width:216px;height:289px;
background-image:url("colabox.jpg");
margin-left:2px;
}

.relativetwo {
width:1300px;
}

.menu {
width:1200px;
}

.menu li {
transform:scale(1.3,1);
letter-spacing:10px;
font-size:20px;
float:left;
border:5px solid #172c3a;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ff0003), color-stop(1.00, #360b0b));
background: -webkit-linear-gradient(#ff0003, #360b0b);
background: -moz-linear-gradient(#ff0003, #360b0b);
background: -o-linear-gradient(#ff0003, #360b0b);
background: -ms-linear-gradient(#ff0003, #360b0b);
background: linear-gradient(#ff0003, #360b0b);
color:white;
font-weight:bold;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳＰゴシック', sans-serif !important;

}

.menu ul {
height:40px;
}

.maincontentstop {
margin-top:15px;
outline:7px lightgray double;
padding:10px -20px 5px 10px;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳＰゴシック', sans-serif !important;
clear:both;
width:1000px;
}

.sns {
padding: 5px;
width: 60px;
height: 60px;
-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}

/.sns svg{
width: 100%;
height: auto;
}/

.bordermovie {
border:3px solid lightgray;
width:460px;
}

上記は、コカ・コーラのホームページを作成すると仮定して、練習用に作ったものです。
menuクラスをwidth1200pxに指定しているのですが、全くこの指定通りにならず、ページの横幅の60％程度にしか横幅が取れていません。
横幅を90％程度にしたいのですが....

アドバイスお願い致します。