为什么我的汉堡菜单不在右侧（移动设备）？

Question

当我使用手机时，汉堡菜单不在右侧。但是，当我使用开发人员工具时，它位于右侧。我不明白为什么会发生这种情况。

开发者工具：

手机：

代码：

<nav className="nav-menu-mobile">
  <div className="hamburger-container">
    <Hamburger toggled={isOpen} toggle={setIsOpen} />
  </div>

  (Codes for Link Menus)
</nav>

CSS：

.nav-menu-mobile {
  position: fixed;
  top: 0;
  right: 0;

  z-index: 3;
}

.hamburger-container {
  padding: 15px;
  width: 100vw;

  display: flex;
  justify-content: end;

  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}

@media (min-width: 655px) {
  .nav-menu-mobile {
    visibility: hidden;
  }
}

Answer 1

有时您可以设置 justify-content: flex-end; ，它可能会解决问题。

.hamburger-container {
justify-content: flex-end;
-webkit-justify-content: flex-end;
}