Fixed issue with navigation bar content overflowing to the right on mobile landscape view.

Question

Completed my navigation bar on PC and shared the code to my iPhone for landscape and portrait viewing. In landscape, the navigation bar overflows to the right. Added env(safe-area-inset) value for non-blocking purpose views, but overflows on the right. Can't seem to find the problem.

iPhone (11 Pro Max) landscape The left gap is the safe area env(), but the right safe area gap is overflowed by the navigation bar.

下面是代码：

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

body {
  background: white;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  height: 50px;
  align-items: center;
  background: #0f0f0f;
  color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.hamburger {
  display: none;
}

.hamburger i {
  color: white;
  font-size: 25px;
  padding: 5px 7px;
  border-radius: 5px;
}

.hamburger i:hover {
  color: white;
  background: rgb(69, 69, 69);
}

.nav-bar .nav-items {
  display: flex;
  margin-top: 4px;
  align-items: center;
}

.nav-bar .nav-items li a {
  user-select: none;
  font-weight: bold;
  display: block;
  color: white;
  font-size: 20px;
  padding: 4px 10px;
  transition: 150ms;
  -webkit-transition: 150ms;
  -moz-transition: 150ms;
  margin: 0 10px;
}

.nav-bar .nav-items li a:after {
  display: block;
  content: "";
  border-top: 2px solid rgb(140, 73, 255);
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  transition: transform 150ms ease-in-out;
  -webkit-transition: transform 150ms ease-in-out;
  -moz-transition: transform 150ms ease-in-out;
}

.nav-bar .nav-items li a:hover:after,
.nav-bar .nav-items li a.active:after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
}

.nav-bar .nav-items li a:hover {
  filter: brightness(85%);
  -webkit-filter: brightness(85%);
}

.nav-bar .login-register {
  display: flex;
  flex-direction: row;
}

.nav-bar .login-register .button {
  user-select: none;
  margin-bottom: 4px;
  color: #fff;
  font-size: 20px;
  border: 2px solid rgb(116, 36, 255);
  padding: 4px 20px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  transition: all ease-in 0.2s;
  -webkit-transition: all ease-in 0.2s;
  -moz-transition: all ease-in 0.2s;
}

.nav-bar .login-register .button:hover {
  background: rgb(116, 36, 255);
}

/*works fine | small res mobile view*/
@media only screen and (max-width: 850px) {
  .hamburger {
    height: auto;
    display: block;
    cursor: pointer;
  }
  .hamburger i {
    width: 35px;
    height: 35px;
    background: #0f0f0f;
  }

  .nav-bar .nav-items {
    flex-direction: column;
    position: fixed;
    width: 20vw;
    background: #383838;
    padding: 1.5rem 0;
    height: 280px;
    top: 46px;
    z-index: 99;
    right: -100%;
    transition: 0.2s ease-in;
    -webkit-transition: 0.2s ease-in;
    -moz-transition: 0.2s ease-in;
  }

  .nav-bar .nav-items li a {
    font-size: 20px;
    padding: 0 10px;
    margin: 10px 0;
  }

  .nav-bar .nav-items.active {
    right: 0;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<navbar class="nav-bar">
  <div class="logo" onclick="window.location.href='Home.html'">TEST LOGO</div>
  <div class="hamburger" for="check">
    <i class="fa-solid fa-bars"></i>
  </div>
  <ul class="nav-items">
    <li>
      <a href="#" class="active">Home</a>
    </li>
    <li>
      <a href="#">Explore</a>
    </li>
    <li>
      <a href="#">Shop</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <div class="login-register">
      <a href="#" class="button">Login</a>
    </div>
  </ul>
</navbar>

我和一个朋友尝试了不同的更改，例如 ma​​rgin-padding、align-items、list-style、overflow、display、width/max-width 属性。所有这些都会导致导航栏中的内容发生位移或尺寸错误。

Answer 1

I tried your code, the sidebar did not appear

If you are using a live server, I recommend refreshing the page multiple times

Answer 2

I finally found the problem of navigation bar overflow, it should be a position: Sticky value in .nav-bar.