So the problem started when I tested my website on a windows with 150% scale, its elements were bigger than what I wanted as I built it on a windows with 125% scale.
I figured that changing the scale in this windows to 125% solves the problem, also zooming out in the webpage does, while searching for css/javascript solution I found few threads here suggesting solutions that I tried, such as:

1. document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));
   doesn't have any effect on desktop, only on mobile.

2. body { zoom: 0.8; }

   this is the closest solution to the actual zooming result, but still not the same as sections that had height: 100vh now has something like 80vh, width is good but still not 100% equivilant to zooming out and hitting 80% zoom level.

3. html { transform: scale(.8); transform-origin: 0 0; }
   that keeps a white marginal areas on the right, so I tried to add:
   width: 125%; height: 125%;
   but that still isn't equivilant, it has the same effect of previous solution.