Mobile site squashed and hiding menu

I don’t understand why the mobile site looks fine when I check it in the editor but when I try on my phone (iPhone X) it looks completely different.

I’ve tried adding extra padding but the logo is still over the collection list. And the collection list is still obscuring the menu bars.


Any idea what could be going wrong?

Also…
Does anyone know how to remove the author CSS section? It doesn’t show in the mobile editor either, but I see it when I test it on my phone. When I try and delete the ‘author’ CSS, it says I have to remove it from where it is being used. But the author is a required element in the CSS blog posts. I’m in a chicken and egg situation.

Thanks in advance,

Julia


Here is my site Read-Only: https://preview.webflow.com/preview/just-julia-blog?utm_medium=preview_link&utm_source=designer&utm_content=just-julia-blog&preview=fa3a74d5452e09ac3abb826b3d152020&pageId=5d406b1c2bc0d0f8b9f4f038&mode=preview
Here is the site link: https://www.justjulia.co/category/datingandotherstuff