Zooming with the navigator (CTRL + mouse scroll) moves elements


When I access my website through my phone, it shows a little white bar in the Hero Section (div item Section v3 - Slider).

Zooming the page is the only way to reproduce it in the Designer.

I’m also unsure if using relative positioning and negative top position is the best way to overlap the Navbar with the Hero Section. I did it because, when you scroll, the navbar changes its color, then I have a Hero Section with a transparent navbar, then when scrolling, the navbar becomes opaque.

Anyway, the main problem is that I don’t know how to make the Hero Section always positioned on 0% of the body. Zooming in Chrome desktop, from Tablet breakpoint and bellows, shows this white bar:

Here is my site Read-Only: