How do I manage image alignment?

I'm new to squarespace and don't have any CSS experience (although I have found to where to enter CSS code... if I just have to paste it in, I'm good). I'm struggling to work with the alignment of my images on this page: http://verdantstewardship.com/current-projects/.

Two questions about it:

1) How can I make sure that the top two images align properly? (They look fine in the editor, but aren't lined up on the live page.)

2) How can I set the pixel width for each image so that all four on the page are filling the same amount of column space?

Explicit answers aimed at a beginner would be greatly appreciated! (Not surprisingly, I'm not working in the developer platform.) Thanks!

1. The alignment looks okay to me: 

    

    
2. At the moment you have two columns and two rows. Your site is not very wide. The images automatically resize based on the browser view size (i.e. adjust for mobile).

    

   You could override the CSS to set a specific width e.g. width: 20%; or width: 250px;. We do a lot of these changes for customers but customisation like this usually takes a bit of CSS coding. In the Style view you can access the Custom CSS Editor.

Thanks for the feedback! I did keep tweaking it after posting the question and found an answer on another forum page earlier today that fixed it.

Apparently, I had resized just the top right photo (seasonal high tunnels) within the editing platform using the bottom toggle/handle. That seemed to override the actual photo cropping settings that I did within the image block. Once I double-clicked on the bottom slider in the editing platform, it reset back to the selections that I made in the image block. Baffling, but it worked.

The alignment of these two do still look strange in a vertical orientation in mobile (although the two in the next rows are fine), but I can live with it for now. I appreciate the help.

You can resize images without code using the handle on the bottom of your images within Image Blocks, or you can use Spacer Blocks to resize them.

Squarespace has a super handy guide here that explains how to resize images within your site without having to use any custom code:

https://support.squarespace.com/hc/en-us/articles/206566727-Resizing-an-image