Wordpress navigation CSS compatibility issue

Question

I'm at the very start of creating a clients website, however i've already hit a stumbling block; i am trying to add a ribbon type look to the navigation in Wordpress, however whenever i add a padding or margin to the navigation (namely .menu ul), on iOS devices like the iPhone and iPad, the right side of the ribbon extends across the screen further than it should.

Any idea as to what is causing this?

Site in question: http://site.n8geeks.com

Edit: I changed the width of the .menu ul - It appears when i add a pixel value, it is interpreted differently in iOS browsers, however when i add a percentage value it seems fine on iOS. Any ideas why this is?

Edit2: Now the issue is that the top part of the ribbon doesn't show on the right hand side on iOS devices (the bit that 'bends behind' the page). Any help?

Thanks.

Answer 1

For those who may have a similar issue to me in the future, the problem was that Safari was taking the parent wrapper and resizing it to fit the screen. Fixing this involved adding a new wrapper that was bigger than the #page wrapper.