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:

https://preview.webflow.com/preview/capitol-chocolate-fountains?utm_medium=preview_link&utm_source=designer&utm_content=capitol-chocolate-fountains&preview=ab6d3a1e9b5948c3c801586e9daf5479&mode=preview

Published Link:

http://capitol-chocolate-fountains.webflow.io/

Screenshot:

Any Help is appreciated.

Thank you.