Cannot change the width of one-column body of Twenty Twelve

Here is the part I added to style.css of my child theme to change the width.

/* This Block Adjusts the Overall Theme Width */
footer[role="contentinfo"] {
	max-width: 640px;
}
@media screen and (min-width: 600px) {
	.site {
		max-width: 640px;
		max-width: 45.7142857143rem;
	}
}
.ie .site {
	max-width: 640px;
}

Many thanks for your help,

Thank you for this solution, was looking for it ??

Sorry, this was misleading. In my situation, the code above did not solve my problem…!
I am still waiting for advice.

This was solved as time went by (I just re-widened it to 720px from 600px)!

However, I wanted to keep the size of top banner (abirdwhale.com) and menu (Main, Facebook, YouTube Channel etc.). Is there any good way to keep (or widen) their size?

Very many thanks,

Instead of .site, use .site-content.

Remove all modifications for that part, and try this.

@media screen and (min-width: 648px) {
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width:600px; margin:0 auto; float:none;
	}
}

Edit: in @media use 648px not 600px because of the paddings

Thank you so much. I appreciate you kindly told me about paddings as well, I was confused about 648px.

What would it be if I want to make the width ‘720px’?
Would it be something like this?

@media screen and (min-width: 648px) {
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width:720px; margin:0 auto; float:none;
	}
}

For 720px, use this.

@media screen and (min-width: 768px) {
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width:720px; margin:0 auto; float:none;
	}
}

Notice the 768px in @media, it’s from 720px plus 48px ( 24px paddings left and right )

Thank you again paulwpxp.

I’ll try that code, and see how it works.
So, do you think I don’t have to include ‘rem’ width in this case?

You can if you want. But what’s the point of using rem when the browsers that understand rem also understand px, in fact all the browsers understand px.

It goes like this.

If you use rem, you have to also use px as fall back for browsers that don’t get rem.

If you use px, just use px.

rem is useful when you want to change thing based on font size of the root, in this case we don’t care about that, we only want the exact width.

Thanks a lot for the further explanation. I was thinking about adding rem just because the default style.css of Twenty Twelve includes it.
Actually I need to study more to do things accurately.

Actually I need to study more to do things accurately.

We all start doing just that, and then gradually fall into the “whatever works” zone just the same ??

I am sorry for being late to make this topic resolved. Thanks a lot for your very kind support, paulwpxp.