How to get padding and margins to work, for gallery and separate images.

Hello.

I have started experimenting on a site for the past two days, my goal is to bring all my images together and from my understanding this is controlled my margins. But when I use my code I only manage to move one image into the space of another. I worked around this by using Full Bleed gallery blocks. This slightly resolves my overlapping issue but does not allow me to select individual images, so that I can make them opaque on hover, the entire block of 3-4 images is effected. 

I'm really new to web design, css and, coding I'm just trying my best to find answers online/YouTube . Am I approaching this issue correctly (doubt I am lol)  if not how can I go about making what I am attempting to achieve in the correct manner. I hope you can see the images I have provided.  Any advice is welcome. 

Thank you.

Hi. Can you share site url? We can check easier