I am at my wit's end here, and I beseech the fine folks here at stackoverflow for help.

I am working on a design for a blog for a friend of mine, and I'm working in HTML5. I am trying to get the width of the page to span the width of an iPad.

So, in my document head, I have the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Now, if you go to the index page, on an iPad, it looks just fine. The width of the page spans the width of the iPad in portrait mode, as I expect it to:

http://www.alanreuterart.com/femmegamers/index.html

It also looks fine on any individual blog posts as well.

However, on the "about" and "join" pages, the width does not do this. It's actually overflowing past the length of the iPad to the right. View the following page on an iPad to see what I mean:

http://www.alanreuterart.com/femmegamers/about.html

I've tried everything. I cannot, for the life of me, figure out how to get it those two pages to correctly span the device width of the iPad.

One important note, though: before anyone tells me to set my viewport width to 960, I cannot do that because the pages have media queries in them to convert to a mobile layout for the iPhone and other mobile phones. (I am not making a special unique layout for the iPad.)

Can ANYONE help out here?

Thanks in advance!

—Me.