I've recently been making a website and for some reason working on media queries for it to fit mobile view. It has lots of extra white space which is confusing to me.

My problem : Extra white space in mobile view, that im positive is caused by the "MainMenu" dropdown from a "Burger" that I'm using. It seems like MainMenu has a min-width instead of width 100% but I don't know why. Also on Mobile View you can scroll really far out of the webpage and get all this extra white space.

Here is some code of the 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);
}

JS Burger Script -

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

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

Here is some reference images of my problem :

My Question : How can I remove extra white space on my page, and set the burger menu to width of 100%.

Heres my github/website to check it out fully : https://github.com/ConstantineLinardakis/TwinPlayzOfficial https://constantinelinardakis.github.io/TwinPlayzOfficial/index.html