How to make page header cover background image adopt to different computers?

Hello everyone,
I faced a problem yesterday and don’t know how to fix it.

I want to display a banner image(1920px width) between the header and page content, i was using elementor to do it before (pages must be set in elementor full width), but i could not add navigation menu in the side bar (Because sidebar in full width page). I need the full 1920px width banner and left navigation side bar in my products page!

Customify has a page header section which allows me to put the banner image in the background. Customize-Layouts-Page Header- Cover settings- color& background- background image.

The question is that image does not display properly in different computers, the image is chopped at both of left and right side in my laptop, i tried to set the background image size at Default/Auto/Cover/Contain, the image will only adopt to different screen accordingly when i set its size at ‘Contain’. And it resulted that there’s a big blank part between the image bottom border and top border of the page content.

So, how could i get rid of that blank part?
BTW, i am now adjusting the page content in elementor to eliminate the blank part, moving the content upwards, which i think is not the best solution.
Thank you,

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