How to make the page/post content area wider?

You would have to manually use custom CSS to adjust that. Please go to "Appearance > Customize > Additional CSS" and try applying this code:

.page .post-content-container,
.single-uxbarn_portfolio .post-content-container {
    margin-left: 0;
}
.page .post-title,
.page .post-content,
.single-uxbarn_portfolio .post-title,
.single-uxbarn_portfolio .post-content {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
.single-post .post-content-container, 
.blog-list .post-content-container.no-image, 
.search-results .post-content-container {
    margin-left: 10%;
}
.no-image .post-excerpt, 
.search-results .post-excerpt, 
.single-post .post-content {
    width: 70%;
}
.blog-list .no-image .post-meta-wrapper, 
.single-post .post-meta-wrapper {
    margin-left: 8%;
    width: 16%;
}
@media only screen and (max-width: 950px) {
    .page .post-content-container, 
    .single .post-content-container, 
    .blog-list .post-content-container.no-image, 
    .search-results .post-content-container {
        margin: auto;
        width: 70%;
    }
    .no-image .post-excerpt, 
    .search-results .post-excerpt, 
    .single .post-content, 
    .page .post-content {
        float: none;
        width: auto;
    }
    .blog-list .no-image .post-meta-wrapper, 
    .single-post .post-meta-wrapper {
        margin: auto;
        width: auto;
    }
    .page .post-title,
    .single-uxbarn_portfolio .post-title {
        width: auto;
    }
}
@media only screen and (max-width: 800px) {
    .page .post-content-container, 
    .single .post-content-container, 
    .blog-list .post-content-container.no-image, 
    .search-results .post-content-container {
        margin: auto;
        width: 90%;
    }
}