Footer/text overlaps when viewed in tablet mode/smaller desktop screen sizes (works OK w big desktop+mobile screen size but overlaps with screen sizes in between)

https://reed-collie-yak3.squarespace.com/projects
Password: go

Help! The footer and some other text blocks look perfectly fine when in bigger desktop screens + mobile screen view, but start to overlap and look weird when viewed in screens sized in between those 2 extremes (particularly, on an iPad tablet and a small laptop screen). What code can I use to make sure it keeps a max width of 100% regardless of screen size? Any help appreciated. Thanks.

Image 1 & 2 = Footer viewed on a wide desktop screen + mobile
Image 3 & 4 = Footer viewed on a tablet+small laptop screen
Image 5 & 6 = Text block viewed on a wide desktop screen + mobile
Image 7 & 8 = Text block viewed on a tablet+small laptop screen

The problem is quite simple, you have overlapping blocks on the desktop version, so when the text exceeds the width of the block it breaks to a new line, and instead of pushing the content below it down it overlaps.

I would suggest placing more text into the each text block where possible, and making sure that you limit the overlapping of blocks and this won't happen.