Issues with Mobile Portrait View vs. Actual Mobile View

Hi all!

I’m running into issues laying out my mobile design. The mobile portrait view (within my laptop internet browser viewport) looks just fine, but it looks very different when I go to open up the design on my actual phone. The most noticeable issue is the difference in margins. For whatever reason, the margins that appear on my actual mobile phone are much larger and look very undesirable as it squeezes everything together.

Does anybody else run into this issue? Why is this happening and can it be fixed?

Here are some screenshots showing the differences in both views (I’ll also add a link to my project, too):

What I actually designed on my laptop for the mobile viewing experience:

What is being shown on my actual mobile phone (I have an iPhone 11 for screen size reference):

Here is my site Read-Only: