Fixing the Homepage Post Width in WordPress’s Twenty Seventeen Theme

I’m still relatively new to WordPress, but one of the things that really got me worked up was the width issue on the front page of my website.  I mean, just look at this:

So I did some Google searches and actually didn’t have much luck.  There were no settings in WordPress that I could change, and the CSS settings that I found just didn’t work.

This meant I had to fire up the DOM inspector in Chrome and play around with CSS settings.  So that’s exactly what I did, and I found a solution that I wanted to share here.  Simply paste this CSS into the “Additional CSS” setting in your theme configuration:

.blog:not(.has-sidebar) #primary article,
	.archive:not(.page-one-column):not(.has-sidebar) #primary article,
	.search:not(.has-sidebar) #primary article,
	.error404:not(.has-sidebar) #primary .page-content,
	.error404.has-sidebar #primary .page-content,
	body.page-two-column:not(.archive) #primary .entry-content,
	body.page-two-column #comments {
	width: 90%;
}

…and that should fix the issue, making your front page look like this:

Is that not a thing of beauty? 🙂

Let me know if you have any thoughts or concerns in the comments.

— Doug