Regarding this step:
1. Each image is inserted into an Editor widget. Paragraphs are enabled for each widget. Disable paragraphs in each Editor widget that contains an image as follows: https://imgur.com/a/3iiaW3J.
You have only removed the paragraph from the middle image. You must complete this step for all images. Edit the Editor widget that is holding the images and disable paragraphs: https://imgur.com/a/3iiaW3J.
Alternatively, remove the SiteOrigin Editor widget used for the images and instead insert a SiteOrigin Image widget.
For the first image, I’ve explained exactly where the bottom space is coming from using these two screenshots: https://imgur.com/a/UuhGGHz. The spacing below the first image is there because of the paragraph tag in the Editor widget which I’ve explained how to remove and from 18px of bottom margin from your settings.