Start using rems/ems or % for sizing.
If you want your website to be more “flexible” don’t declare the height and width of your container with px. In fact, I recommend you to stray away from using px in your next project as it limits a lot of possibilities when it comes to responsiveness.
You do not need to set the width of html and body, especially because you have a .main div which is wrapping around your container declaring a width and height as well.
I noticed you trying to declare the VH in .main; a slight mistake in which you wrote 100vw for vheight, which should be 100vh.
If you rewrote your code in css for the .main div to have display:flex, justify-content:center, and align-items:center,
.main display: flex; justify-content: center; align-items: center; height: 100vh
It is a way to perfectly center the child container (.container)