如何使用CSS Flexbox将导航栏精确地定位到右侧

<div class="bg-img.JPG">
  <div class="container">
    <div class="topnav">
      <nav>
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </nav>
    </div>
  </div>
  <!-- ... other content ... -->
</div>

.container {
  position: absolute; /* 保持绝对定位，使其脱离文档流 */
  margin: 20px auto; /* 顶部和底部外边距20px，左右自动，配合width: 100vw */
  width: 100vw; /* 使容器占据整个视口宽度，为右对齐提供空间 */
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 设置主轴方向为垂直，即子项垂直堆叠 */
  align-items: flex-end; /* 将子项（此处为.topnav）沿交叉轴（水平方向）对齐到末尾（右侧） */
}

/* 保持导航栏背景透明 */
.topnav {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0); /* 完全透明 */
  /* ... 其他样式 ... */
}

/* 导航链接的样式，可以继续使用float: right或改为Flexbox */
.topnav a {
  float: right; /* 链接在.topnav内部右浮动 */
  color: #fefefe;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: #fefefe;
  color: black;
}

/* HTML 和 body 基础样式 */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0; /* 确保没有默认外边距 */
  padding: 0; /* 确保没有默认内边距 */
}

* {
  margin: 0;
  padding: 0;
  font-family: verdana;
}

/* 背景图片容器 */
.bg-img.JPG {
  width: 100%;
  height: 100vh;
  background-image: url(img2.jpg); /* 替换为你的图片路径 */
  background-size: cover;
  position: relative; /* 确保 .container 的 absolute 定位是相对于它 */
}

/* 导航栏容器 - Flexbox 解决方案 */
.container {
  position: absolute;
  margin: 20px auto; /* 垂直外边距20px，水平自动 */
  width: 100vw; /* 占据整个视口宽度 */
  display: flex; /* 启用Flexbox */
  flex-direction: column; /* 主轴垂直 */
  align-items: flex-end; /* 子项沿交叉轴（水平）右对齐 */
  top: 0; /* 将容器固定在顶部，或根据需要调整 */
  left: 0; /* 将容器固定在左侧，配合 width: 100vw */
}

/* 导航栏样式 */
.topnav {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0); /* 完全透明 */
  /* 可以选择在这里添加 display: flex; justify-content: flex-end; 来管理内部链接 */
}

/* 导航链接样式 */
.topnav a {
  float: right; /* 链接在 .topnav 内部右浮动 */
  color: #fefefe;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #fefefe;
  color: black;
}

<div class="bg-img.JPG">
  <div class="container">
    <div class="topnav">
      <nav>
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </nav>
    </div>
  </div>
  <!-- ... 其他内容，如背景图片元素 ... -->
</div>