Navbar chopped off when resizing - html

Question

My navbar gets chopped off from both sides whenever I resize the window, like in this picture.
Chop chop
I want the navbar to fit the entire screen, even when the window is resized, so that all the links and logo are visible.
I tried making the width 100vw but it has no visible effect.
Here is my HTML and CSS:
<header>
<nav>
<ul>
<li><div class="container"><img src="https://i.ibb.co/SP0TLzQ/broozeb.png" alt="logo" class="logo" border="0"><div class="overlay"><div class="text-test">米</div></div></div></li>
<li>ホーム</li>
<li>米さんについて</li>
<li>日本の文化</li>
<li>学習の情報</li>
<li>English Stuff</li>
</ul>
</nav>
</header>
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
list-style-type: none;
margin-left: 5px;
}
nav ul li a {
color: white;
background-color: blue;
display: block;
line-height: 3em;
padding: 2em 4em;
text-decoration: none;
font-weight: bold;
}
nav ul li .logo {
background-color: white;
border-radius: 50%;
margin-left: 10px;
}
nav a:hover {
color: red;
background-color: white;
transition: all 0.3s ease 0s;
}
I'm really sorry to ask such basic questions, but this has been troubling me for a few weeks. I very very much appreciate your help!! My webpage can be found here: https://komesannonihongotabi.neocities.org/culture.html

Answer 1

This is being caused by the following CSS line:
nav ul li a {
padding: 2em 4em;
}
Your a tags have a padding on left and right of 4em. Since em is an absolute unit and not a relative one, it will stay the same on any screen size. That is, unless you change the font-size to be smaller but I don't think that would be a good solution here. Just try adding a relative unit like %, or use a breakpoint as follows:
nav ul li a {
padding: 2em 1em;
}
#media screen and (min-width: 900px) {
nav ul li a {
padding: 2em 4em;
}
}
Another, and maybe better solution to your problem would be to use a sidenav with hamburger icon. This may however be a bit complex for beginners.

Answer 2

What if you remove this line white-space: nowrap; from nav {}
Before
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
After:
nav {
background-color: blue;
border-bottom: solid #09316b; }
It starts to resize now. If you want more info about white space -> Click here -<