I’m having some HTML/CSS trouble on my I guess it would be a quick fix, but not for me right now.

I put the code in a JSFiddle to easily show the issue.

Problem Description
When I access my site from my phone, it appears very zoomed out.
I then added this code:
<meta name="viewport" content="width=device-width, height=100%, initial-scale=1.0" />
This fix the zoom issue, but this hasn’t resolved the layout issues.
When I add additional content to my site and scroll down, the layout doesn’t behave as expected. It seams to break the design. The issue only occurs on mobile devices.

Cheers!