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

Question

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

开发者工具：

手机Phone:

代码：

<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;
}

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

Why is my Hamburger menu not in right(mobile)?

css

flexbox

developer-tools