Navbar menu dropdown position looks different in preview than on real mobile screen

Hello fellow Webflow enthusiasts!

May I seek your help with an issue I am facing?

In my webflow preview for mobile, the dropdown menu looks like this which was what I wanted.
image

However, when I opened on my mobile, the dropdown menu was offset to the left (see below image). Could anyone help to advise me on how to resolve this?

Thank you soo much!


Here is my site Read-Only: Webflow - Gang's Portfolio
(how to share your site Read-Only link)

it’s because you set a left margin on your dropdown menu instead of relying on regular positioning. Do not use margins to control the width of that menu, instead use percentages or px width to control it. I see you have this left margins on other viewports as well. remove these styles and use positioning and width to make it look as you wish and it should fix it