我的导航栏在桌面模式下工作得很好。但是当我降低屏幕分辨率时，它开始不覆盖窗口的整个宽度。你能帮我使它覆盖屏幕的整个宽度吗？
我的主页. html文件

var ser = document.getElementById('in');
document.getElementById('in').onkeypress = function(e) {
  if (e.keyCode == 13) {

    console.log("ent")
    var value = document.getElementById('in').value;
    var search = "example";
    console.log(value)

    window.open("result.html", "_self");
    sessionStorage.setItem("search", value);
  }
}

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const item = document.querySelector(".item");
hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
  //hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");

}

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
  hamburger.classList.remove("active");
  navMenu.classList.remove("active");
}

var width = screen.width;
var height = screen.height;

var tempo = document.getElementById("tempo");
var ser = document.getElementById("ser");

if (width < 650) {
  tempo.remove();
  ser.remove();
  navMenu.setAttribute('width', '100%')
}

* {
  margin: 0px;
  background-color: white;
}

.navbar {
  background-color: blue;
  width: 100%;
  height: 50px;
}

.navbar-container {
  display: flex;
  align-items: center;
  background-color: black;
  height: 100%;
}

.item {
  padding: 0 20px;
  background-color: black;
  color: white;
  text-decoration: solid;
}

.search_box_item {
  padding: 0 0 0 400px;
  width: 500px;
}

.p1 {
  float: right;
}

.pm {
  font-family: 'Courier New', Courier, monospace;
  color: aquamarine;
  font-size: 5vw;
  background-color: transparent;
  width: 3vw;
  margin: 10px 10px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}

.nav-items {
  list-style-type: none;
}

#in {
  border-radius: 25px;
}

.hamburger {
  display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #101010;
}

@media only screen and (max-width: 767px) {
  .navbar {
    height: 20vw;
    width: 100%;
  }
  .logo {
    height: 1vw;
    width: 1vw
  }
  .navbar-container {
    align-items: center;
    background-color: black;
    height: 100%;
  }
}

@media only screen and (max-width: 480px) and (min-width: 320px) {
  .navbar {
    height: 30vw;
  }
  .navbar {
    height: 20vw;
    width: 100%;
  }
  .logo {
    height: 10vw
  }
  .navbar-container {
    align-items: center;
    background-color: black;
    height: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 5rem;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }
  .nav-menu.active {
    left: 0;
  }
  .nav-item {
    margin: 2.5rem 0;
  }
  .hamburger {
    display: block;
    cursor: pointer;
  }
  .navbar-container {
    align-items: center;
    background-color: black;
    height: 100%;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
    width: 100%;
  }
  .temp {
    visibility: collapse;
  }
  .navbar {
    height: 20vw;
    width: 100%;
  }
}

.nav-menu {
  background-color: black;
  width: 100%;
  height: 40%;
  margin-top: 0px;
}

<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
<div class="navbar flex-row" style="width: 100%;">
  <nav class="navbar-container navbar" style="width: 100%;">
    <div class="navbar-logo item"><img class="logo" src="images/Navlab.png" style="width:3vw"></div>
    <div class="search_box_item item temp" id="ser">
      <input id="in" type="search" placeholder=" Search here" style="width:100%; background-color: white; align-self: center;">
      <!--<button id="search" style="background: url(images/search1.png); height: 40px; width: 40px; border: none;"></button>-->
    </div>
    <div class="nav-items flex-row" id="tempo">
      <li class="ptopics item temp">New releases</li>
      <li class="profile item temp"><a href="profile.html">My profile</a></li>
      <li class="about item temp">About us</li>
    </div>
    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
    <div class="nav-menu">
    </div>
  </nav>
</div>
<div class="firstp" style="max-width: 100vw; height: 100vw;">
  <img style="float:left; max-width:50%vw; height:auto; margin: 10vw 10vw;" src="images/i1.png">
  <p1 class="pm" style="margin-top: 10vw; padding-top: 5vw; float:left">Read <br> Write <br> Learn</p1>
</div>

我尝试使导航栏，导航栏容器和导航菜单的宽度100%，但它仍然不工作。