Recientemente he estado creando un sitio web y, por alguna razón, trabajando en consultas de medios para que se ajuste a la vista móvil. Tiene un montón de espacio en blanco extra que es confuso para mí.

Mi problema : el espacio en blanco adicional en la vista móvil, que estoy seguro, es causado por el menú desplegable "Menú principal" de una "Hamburguesa" que estoy usando. Parece que MainMenu tiene un ancho mínimo en lugar de un ancho del 100%, pero no sé por qué. Además, en Mobile View puede desplazarse muy lejos de la página web y obtener todo este espacio en blanco adicional.

Aquí hay un código del MainMenu: CSS -

 /* Nav Main Menu */ nav .mainMenu { display:flex; list-style: none; } nav .mainMenu li a { display: inline-block; padding: 30px; margin:10px; text-decoration: none; color: rgb(0, 0, 0); font-size: 1.5rem; font-family:'Courier New', Courier, monospace; } nav .mainMenu li a:hover { color: rgb(0, 110, 255); }

Guión de hamburguesa JS -

 function show(){ mainMenu.style.display = 'flex'; mainMenu.style.top = '0'; } function close(){ mainMenu.style.top = '-100%'; }

Aquí hay algunas imágenes de referencia de mi problema:

Mi pregunta : ¿Cómo puedo eliminar el espacio en blanco adicional en mi página y establecer el menú de hamburguesas en un ancho del 100 %?

Aquí está mi github/sitio web para comprobarlo completamente : https://github.com/ConstantineLinardakis/TwinPlayzOfficial https://constantinelinardakis.github.io/TwinPlayzOfficial/index.html