Foster Blog Title/Body width adjustment

Is there a way to adjust the Foster Blog Titles and Body text widths across the whole blog?

At the moment the body is extremely narrow unless you expand your browser very wide - at which point the body copy hits a max width (but then the headline runs very wide!)- or until you shrink your browser until the page hits a break point that calls up a body width that's better.

3 Examples

Here is a medium sized browser window where the body is way too narrow:

Here is a very wide browser window where the body text is good but the headline is a bit ridiculous: 

And here is a narrow window (right after the break point) - that looks perfect ( if only these proportions would be the max width for both title and body text no matter the browser width):

Hi,

Can you share link to a blog? We can check easier

HI,

Sure, Here is the site. https://interactivist.squarespace.com

As you'll see, I have an image, and a title question too.

Thanks.

13 hours ago, jholo said:

HI,

Sure, Here is the site. https://interactivist.squarespace.com

As you'll see, I have an image, and a title question too.

 

Thanks.

It looks like you solved this??

Oh sorry!  yeah I got into developer mode and messed with everything I could find until I resolved it.  Here is what I wrote - no idea if it's optimal:

.BlogList {
    max-width: 600px;
     margin-left: auto;
    margin-right: auto;
    padding-left: 1vw;
    padding-right: 1vw;
}
.Main--blog-item .Main-content  {
    max-width: 600px;
    padding-left: 1vw;
    padding-right: 1vw;
}

I have a feeling using "px" isn't a great solution. But I'm not sure what the alternative would be.