In the Twenty Twelve CSS here:
https://s1.wp.com/wp-content/themes/pub/twentytwelve/style.css?m=1350058072g&minify=false

You can see that there is an @media rule for large screen sizes at the bottom. Here is what the rule looks like:

@media screen and (min-width: 960px) {
    /* a bunch of other CSS */
}

Looking in the custom CSS you applied, I found an example of some CSS that doesn't make sense for an iPad:

.main-navigation div {
	display:inline-block;
	margin:0 auto;
	margin-right:-40px;
}

Some of that may work, but the margin-right rule seems way too big for an iPad. However, adding a bunch more CSS to target just iPads seems like doing extra work. Instead, I would recommend editing the custom CSS you already added by wrapping it in the @media rule I mentioned above. That way, you'll apply your CSS changes just to large screens and let Twenty Twelve keep its default for smaller screen sizes (it should just work). If you wanted to make tweaks to smaller screen sizes (like the iPad), you could then add in additional media queries for that.

http://cloudcapsules.wordpress.com