Header Image Issue

Hello,

Summary of post:
I would like to make it so my header images:

1. Do not have any white space between them or between the bottom of the images and the toolbar below.
2. Automatically resize based on the screen size and zoom to maintain their proportions (so that the images all adjust equally if someone zooms in or out of the page).

I have the header set up as four columns with no space in between, with an image of equal dimensions filling each column. I have made all four images in my header the same size, however a white space continues to emerge between some of the images (not all of them) and the black menu toolbar, regardless of their size.

–Detailed post below–

I am trying to make the header images at the top of my homepage responsive, so that they adjust with the screen size and zoom to have the same proportions regardless of zoom and monitor size. At 100% zoom, there should not be any white space between the bottom of the images and the black toolbar below. However, if I zoom into the page to 110%, the images do not adjust proportionally, and a white space emerges between the bottom of the images and the toolbar, despite the fact that there is space for the images to adjust.

Likewise, on a large screen, a gap emerges between the images, despite the fact that I have the distance between the image columns set to 0.

The way I built this was by making four columns in Elementor, and adding an image of equal dimensions to each of the columns. Is there any way for me to make the images responsive so that they resize automatically based on screen size and zoom?

I have tried making all of the images the same size, but there is still a white space between some of the images and the black toolbar regardless of what I try.

Thank you for your time!

The page I need help with: [log in to see the link]