Iphone displaying site a weird mix of widths. @media query help needed

I’m having an odd issue with a website I’m building. The site is http://sandagebell.biklopsdesign.com.

On a desktop browser it looks GREAT! But on the iphone there’s a weird mix of full-width and not-quite full-width elements. You can see the annotated screenshot here: http://cl.ly/MC25

I know nothing of @media queries but I assume that’s the issue here. How can I make the whole site 100% wide on the iphone? I’ve done some reading but am getting conflicting information. I’d really appreciate some guidance.

Not sure if it’s causing the problem or not, but you do have some over-wide elements on your site that cause a slight sideways scroll even on desktop, such as the border on this element:

<div class="wrapper" id="wrapper-14">
</div>

Which is already set to width: 100%; Anyhow, I would fix inconsistencies like that first, at least to rule them out.