CSS Stacking Problem

[drewbie613]

I have my navigation set up on my site with a div to wrap the navigation to position it on the page. My problem is that when I open the site on my iPhone it stacks the navigation and forces the last two items to a second row.

Here's my HTML

<div class="navposition">
<a href="home" class="nav">HOME</a>
<a href="services" class="nav">SERVICES</a>
<a href="about" class="nav">ABOUT</a>
<a href="mailto:info@hassionstudios.com" class="nav">CONTACT</a>
<a href="http://www.hassionstudios.com/blog" class="nav">BLOG</a>
</div>

And CSS

a.nav {
font-family: QuicksandBook;
text-decoration: none;
color: #014371;
opacity: .55;
margin: 20px;
font-size: 17px;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
-o-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
text-align: center;
}

a.nav:hover {
opacity: .8;
}

.navposition {
padding-top: 5px;
margin-top: 10px;
width: 545px;;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}

The website is www.hassionstudios.com

It looks fine on my browser but it only forces it down on my iPhone. I have the viewport set at 800px for mobile viewing (temporary fix before mobile site is enabled) The navigation isn't wider than the jQuery slider I have so I don't understand why it's stacking this, especially since it's not wider than the 800px viewport.

Just for reference, it did this when I didn't have anything configured for the viewport in my meta data.

Any help would be greatly appreciated!

Thanks

[Devastated73]

Try setting a background color to your div wrapper and on your pc screen print and make sure the pixel width is 800 or less using a graphics package... that way you can be sure