Header Image size reduction

I have a website at [ redundant link removed ] and I have two problems:

1. When I have a header image it looks like this on my pc: https://imgur.com/VXMX7OE It is just above the featured content and size of the image is too big (this is my problem number one)

2. When I open the same page in my mobile browser but in desktop mode, the header image stretches on the left side and the full image is not visible (like it is on pc) and it becomes too big after which I see the featured content. Here is how it looks https://imgur.com/a/zN8kqKF .This is my problem number two.

3. Now, when I don’t have any header image there is a small “gap” between the featured content and the top.
That’s the perfect size for me. I want the header image to fit that size.

This is how it looks without the image (please see the size of the gap b/w the top and featured content): https://imgur.com/a/IuHDJC5. Can someone help with the header image size so that it can fit the size of “gap” and also avoid the stretching discrepancy between a phone(desktop mode) and a pc?

Note: When I have a header image and open any post (on my phone or pc) I can see that the size of the image is already perfect (although blurred, take a look here https://imgur.com/a/rOi8FlJ) but as I have said earlier I want this size to be on my homepage (without any blur of course).

Thanks for reading all the way through.

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