Website navigation not displaying properly in ipad

Hi. Just developing my site and am using IOS Simulator to test what my website looks like on an ipad. Anyway the header is not stretching the full length of the screen. ANy ideas why?

This is my html

<header class=“header” role=“banner”>

			&lt;div id="inner-header" class="wrap clearfix"&gt;

				&lt;!-- to use a image just replace the bloginfo('name') with your img src and remove the surrounding &lt;p&gt; --&gt;
				&lt;a id="logo" href="&lt;?php echo home_url(); ?&gt;"&gt;&lt;/a&gt;

				&lt;!-- if you'd like to use the site description you can un-comment it below --&gt;
				&lt;?php // bloginfo('description'); ?&gt;

   					&lt;ul id="top_nav" class="clearfix"&gt;
     					&lt;li&gt;&lt;a href="#" title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" title="Services"&gt;Services&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" title="Vans"&gt;Vans&lt;/a&gt;&lt;/li&gt;
     					&lt;li&gt;&lt;a href="#" title="About"&gt;About&lt;/a&gt;&lt;/li&gt;
     					&lt;li&gt;&lt;a href="#" title="Blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" title="FAQ"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
     					&lt;li&gt;&lt;a href="#" title="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;

			&lt;/div&gt; &lt;!-- end #inner-header --&gt;

		&lt;/header&gt; &lt;!-- end header --&gt;

and this is the CSS

ul#top_nav {
border: 1px solid #292929;
margin: 0 0px 30px 30px;
padding: 0;
width: 1050px;

ul#top_nav li {
list-style: none;
float: left;

ul#top_nav li a {
text-align: center;
height: 50px;
width: 90px;
line-height: 140px;
color: @main-menu-links;
display: block;

ul#top_nav li a:hover {
color: @main-menu-links-hover;

I have also included the following in my head tags

<meta name=“MobileOptimized” content=“320”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>

Cheers guys.