Entonces, el problema comenzó cuando probé mi sitio web en una ventana con una escala del 150%, sus elementos eran más grandes de lo que quería, ya que lo construí en una ventana con una escala del 125%.
Pensé que cambiar la escala en esta ventana al 125% resuelve el problema, también lo hace el alejamiento de la página web, mientras buscaba la solución css/javascript, encontré algunos hilos aquí que sugerían soluciones que probé, como:

1. document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));
   no tiene ningún efecto en el escritorio, solo en el móvil.

2. body { zoom: 0.8; }

   esta es la solución más cercana al resultado de zoom real, pero aún no es lo mismo que las secciones que tenían height: 100vh ahora tiene algo así como 80vh, el ancho es bueno pero aún no es 100% equivalente a alejar y alcanzar el 80% de nivel de zoom.

3. html { transform: scale(.8); transform-origin: 0 0; }
   eso mantiene áreas marginales blancas a la derecha, así que traté de agregar:
   width: 125%; height: 125%;
   pero eso todavía no es equivalente, tiene el mismo efecto de la solución anterior.