How to edit the margin/padding of the mobile menu, once it has been opened?

I am trying to make a basic mobile navigation menu for my website. I am using the 2023 theme, standard Gutenberg full-site editor. I have my navigation aligned to the right on desktop all the way down to mobile.

The problem is that when you click on the hamburger icon to open the navigation on mobile all the pages are aligned right up against the edge of the screen on the right, making it not very usable. A simple solution would just be to add 12px of padding on the right, however if I do this it only shows up when the mobile navigation icon is closed, when it is open the padding I added does not show up.

Does anyone know a simple solution to this without using a responsive menu plugin??


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer