I need some help as a beginner understanding columns in css. I am using a template from dreamteplate and I am using the contact.html page as my home page. Here is a link to preview the unaltered template. The problem is when the page is viewed on a phone or the desktop browser window is scaled down horizontally to simulate small device screen the two columns overlap. Same can be seen on my live site here.

I need assistance knowing what I am looking for to fix and adjust this code. I would either like to make it stop the scaling down at the point right before overlap so you would have to scroll horizontally or even better for phones make the two columns move on top of each other into single column at point of overlap.

Please let me know if there is any additional info you need as again I am very lost as to where to start looking since it is a template and I don't have much experience.