How can extend the width of the content area to make this possible?
First you need to learn how to identify the content container and how the widths are set. The following help page explains how to use your browser’s built in web inspector to find what CSS selectors the theme is using:
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
It also helps to look at a live example. Here is a link to a post on the Untitled theme demo site we can use for reference:
https://untitleddemo.wordpress.com/2013/05/07/sed-ut-perspiciatis-unde-omnis-iste-natus/
Here is a quick video showing how to apply the lessons from the first link to adjust the width of the content area in the example post link:
Here is the CSS from the video to help you get started:
.content-area, #main, #single-main {
max-width: none;
}
I wouldn’t recommend removing the max width completely though. You might want to use a percentage instead or consider just widening the content container a little bit from the default values. By copying the theme CSS, adjusting it, and then putting just the adjusted changes into a CSS editor such as the one that comes with Jetpack.