Wonky Phone Format

Hello everyone,

I made a lot of custom tweaks to the Twenty Twelve theme and I’m (almost) happy with how it looks on the Desktop.

I reduced the column width of the blog posts using the following code:

.hentry {
margin: 70px;
}

I’m happy with how it looks on the desktop. To make it more readable, I didn’t want it to stretch from end to end.

Unfortunately, it’s also squeezed it together on the phone.

Is there any way I can achieve the same idea without compromising the phone layout?

Also, if you look at the menu on the phone, it sits in the middle of the screen and the menu options pop up over the web content.

How do I fix this?

Thank you in advance for reading this and your suggestions.

The page I need help with: [log in to see the link]