body is not covering full page - html

Question

What can I do to make the body cover the whole page? In my CSS for body and html height and width 100%.
With the mobile version, the body is reduced in this way
With the pc version, everything is fine with the width, but the height is not on the whole page
html {
overflow: auto;
height: 100%;
width: 100%;
}
body {
background-color: #1c1c1c;
font-family: 'Press Start 2P', cursive;
}
Here is my full html and css
and if you can tell me what else can be corrected, I will be very grateful

Answer 1

many of your elements have fixed width in px, which doesn't change in the media query. E.g. you have:
.container {
width: 890px;
...
}
.menu__list {
...
width: 700px;
}
You need to change them in your media query
#media screen and (max-width: 450px) { ... }
Personallly I'd keep only the container width in px for desktop and other things in percents, then in mobile versions I'd keepp them all in percents like
.container {
width: 100%
}
Or sometimes
.container {
width: 100%
max-width: 320px;
}

Answer 2

Basing on the first code you posted.
Modify your container class css (Desktop) since its inheriting from wrapper.
.container {
margin: 0 auto;
}
Your current css ( remove width & padding )
.container {
width: 890px;
margin: 0 auto;
padding: 0 20px;
}
Mobile is fine, its just inheriting the screen size of the emulator.