Problem with header when viewing in mobile

Hi. I’m fairly new to web designing. I started using Beaver Builder and I love it. I’m contemplating upgrading to the full version once I have the funds available.
The problem I’m having, is that on my home page everything looks great, on my DESKTOP. But I checked out my site on MOBILE and it seems to have some problems with phasing through the header. (http://www.kiahpapaya.com) Since this site was done a few months back and I’ve just returned to work on it, I decided to check it out. I made a copy of my site and looked at that via mobile and it looked perfect. (http://www.kiahpapaya.com/home-2)
What I noticed is that on my original home page, nothing is blocking a new column from phasing right through the header. In order to compensate for that, I had to add a 150px margin, and I notice that the problem is it’s removing that margin when I’m viewing my site on mobile. When I duplicated it, it was perfectly fine. In fact the margin is showing up creating a large blank space only when editing. I’m pretty confused and it probably shows in this scrambly message, but I’m just hoping for a quick answer.

I’m using the Tesseract theme.
Builder Beaver Lite Plugin

Thanks much,
Jenny

https://ww.wp.xz.cn/plugins/beaver-builder-lite-version/