Changing scale of all items on webpage

Question

I have just finished my project, but after finishing I realized that my localhost:3000 is zoomed in to 125%, so at 100% my project looks less than ideal.

Is there a way to change the zoom/scale of my website to reflect what I looked like on my localhost? I found the answer here that deals with browser zoom, however when I tried to set:

function toggleZoomScreen() {
        document.body.style.zoom = "125%";  //my zoom was at 125%
    } 

It seemed to simply zoom in the view of the webpage like a camera, example here. I'm also not sure why it seemed to shift the webpage to the right.

and by comparison, here's what it looks like when I have my browser zoom set at 125%

Can I fix this without having to redo the css on the entire website?

Answer 1

Just add this in your main css file

body{
   overflow-x:hidden;
}

This will avoid the webpage shifting right or basically getting overflowed !