Unwanted White Space Mobile View HTML / Burger Menu Size-CodePudding

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

CodePudding user response：

The error you are facing isn't because of the Menu. I debugged your website using the dev tools and I found out that

<p> © TwinPlayz 2021</p>

This is the line that is consumingunnecessary space. Add an id to that paragraph like this,

<p id="copyright_text"> © TwinPlayz 2021</p>

And then add the following CSS with the media query

@media (max-width: 600px) {
 #copyright_text {
   width: 130px; //adjust to your own needs
 }
}