Resizing blog post thumbnail blocks

Site URL: https://www.planetsuj.com/

Hi,

I've been having some trouble resizing blog post thumbnails. While the site looks perfectly fine on mobile, the pictures are enormous when on desktop. I've been trying in vain to resize them using CSS but I keep ending up chopping off, squeezing or resizing the image but with the clickable area still large.

I've tried using code such as this which resized the image but it also aligned left, with the clickable area much larger than the image:

.blog-single-column .blog-single-column--container.is-loaded {
    max-width: 720px; 
}

Also the code below only adjusts width, again with a large clickable area:

@media screen and (min-width: 640px) 
{ img { 
      max-width:720px;
} 
}

I might be missing something but is there a way to resize the image containers (as well as the images) for blog thumbnails while viewing on desktop?

I've just anwered my own question, found out how to set the max width without using CSS under the main edit page: Edit > Site Styles > Spacing > Page Width (Max)