Problem with Phone Layout

I am a bit new to Webflow and I am getting used to CSS. (Came from Adobe Muse) There are a lot of things that I like about CSS, but I am getting used to the fact that I make changes and it affects things in other areas that I did not intend to change.

My current issue is that things are working pretty well until I get to the mobile phone layout. I can make it look pretty good in design mode, as well as in preview mode. However, when I look at it on my actual phone (Samsung S8+) there is a big white bar to the right side and things are moved all over the place. I have tried a number of things (including trying to use Flexbox) but usually, I seem to screw it up even more.

Read Only Link:

Published Link:


Any Help is appreciated.

Thank you.