CSS新手求助：如何将导航栏（Navbar）向右移动？

先修正代码里的基础错误 #

1. 类名不能包含.，把所有.bg-img.JPG改成.bg-img
2. 普通CSS不支持嵌套选择器，把.topnav内部的.topnav a和.topnav a:hover提出来作为独立选择器
3. HTML里的< <a href="#about">About</a>多了个多余的<，删掉修正语法

实现导航栏右移的两种方法 #

方法一：Flexbox布局（推荐，更现代灵活）

通过Flexbox让导航栏整体靠右，代码更简洁：

html,
body {
  height: 100%;
  width: 100%;
}

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

.bg-img {
  width: 100%;
  height: 100vh;
  background-image: url(img2.jpg);
  background-size: cover;
  position: relative; /* 让内部绝对定位的container基于它定位 */
}

/* 导航容器 */
.container {
  position: absolute;
  top: 20px;
  right: 20px; /* 固定到右侧 */
  width: auto;
}

.topnav {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0); /* 保持透明 */
  display: flex; /* 使用Flex布局 */
  justify-content: flex-end; /* 子元素靠右对齐 */
}

.topnav a {
  color: #fefefe;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

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

对应的HTML（修正语法错误后）：

<div class="bg-img">
  <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>
  <!-- 注意：如果已经用背景图，这里的img可以去掉，避免重复显示 -->
  <!-- <img src="bg-img.JPG" alt="Snow" style="width:100%;"> -->
</div>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>

方法二：传统浮动+绝对定位

如果习惯用浮动，调整容器位置并保持链接浮动：

/* 其他CSS和上面一致，只修改.container和.topnav相关 */
.container {
  position: absolute;
  top: 20px;
  right: 20px; /* 固定到右侧 */
  width: auto;
}

.topnav {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
}

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

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

关键说明 #

• 给.bg-img加上position: relative，确保内部的绝对定位元素基于它定位
• 通过right:20px把导航容器固定到页面右侧，同时保留顶部间距
• 保持background-color: rgba(255,255,255,0)确保导航栏完全透明

内容的提问来源于stack exchange，提问作者Potion Studies