Reformatting Header, Widget, and Footer Widths (Edin)

Hello, everyone.

Background: I recently changed the width of the content area of a website, as follows:

@media screen and (min-width: 1020px) {
/* Widen content area: */
	.content-area {
		width: 648px;
	}
/* Decrease scale of banner image: */
	.hero {
		padding: 60px 0;
	}
	.hero.with-featured-image,
	body[class*="front-page"] .hero {
		padding: 60px 0;
	}
}

I did the same thing for @media screen and (min-width: 1230px).

Unfortunately, this caused a couple of problems, as follows:
* On the home page, the header and content is 930px wide while the widget area and footer are 1110px wide. How do I normalize these widths throughout the website?
* On every other page, the content is the width I want, but the header, widget area, and footer are 1110px wide. As before, how do I normalize these widths?

Other details:
* The site uses an Edin theme.
* Jetpack was installed and activated.
* The site currently uses the Default menu style for the header, which is the primary menu, but we are considering switching to the Classic style menu.

How do I go about fixing this? Any help would be greatly appreciated!