If you shrink the browser to 480px or less, you will see the mobile design displays fine. However, on an actual iPhone (in portrait), it displays with the content area being much too wide.
Here’s a picture of it on an iPhone:
http://img703.imageshack.us/img703/1944/photoik.png
See what happens if you add this to the <head> of your document:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="viewport" content="initial-scale=1, width=device-width">
Is already in the head. No luck.
The content area seems to be extending to around 480 pixels (which is what the media query is set for).
Oddly enough this is also happening to another site I’m working on. But the weird thing is (and you may just call me crazy), the other website was working fine but is now having the same issue.
Edit - My previous post made the solution come to mind. I installed the new Facebook for Wordpress plugin and despite the plugin not being active on those pages, it was causing the container to stretch to a little over 400px wide.