Responsiveness of my webpage breaks on zoom

I’m having issues with the responsiveness of my webpage.

The first image is of the webpage normally.
The second image shows text overflowing off the page instead of wrapping and staying within view.
The third image shows the bottom of the webpage where more overflowing takes place, resulting in a white gap between the content and the bottom of the page, which I don’t want.
I’ve tried scouring google for a solution but haven’t found any. Any help would be appreciated!

Here is the live demo if anyone wants to view the DOM and code. I have only used HTML and CSS. I’m aware everything is quite large, I’ll be resizing it later.

P.S. This is a mockup design, it’s not a real form.