个人网站技术问题求助：封面边框未填充+Navbar居中失效

1. 封面（Cover Page）无法完全填充边框问题 #

问题原因 #

• 浏览器默认给 body 设置了外边距，导致封面周围出现空白
• 封面高度设置为 90vh，未占满整个视口
• 背景定位的简写属性与单独设置的 background-position 存在冲突

修复代码 #

更新 CSS 中的 body 和 #coverPage 样式：

body {
  font-family: sans-serif;
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
}

#coverPage {
  background: url(https://wallpapers.com/images/hd/dark-shades-of-purple-j1bf61qb3t5kkk6h.webp) fixed center center; /* 统一背景定位为居中 */
  min-height: 100vh; /* 占满整个视口高度 */
  width: 100%;
  background-size: cover;
  margin: 0;
  padding: 0;
}

2. Navbar 无法通过 justify-content:center 居中问题 #

问题原因 #

• 自定义 CSS 中手动设置了 left:38% 和无效的 right:70 属性，覆盖了居中逻辑
• .navbar * { display: inline; } 强制所有子元素为行内元素，破坏了 Bootstrap 的 Flex 布局
• HTML 中存在标签闭合错误：<div class="collapse navbar-collapse..." id="navbarNavAltMarkup" div> 应为正确的闭合标签

修复代码 #

修正 CSS 中的 Navbar 样式：

/*navbar*/
.navbar {
  position: absolute;
  top: 0;
  left: 0; /* 重置为0，让navbar占满宽度 */
  right: 0; /* 重置为0，让navbar占满宽度 */
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center; /* 添加居中逻辑 */
}

/* 移除以下规则，避免破坏Flex布局 */
/* .navbar * {
  display: inline;
} */

.nav-link {
  font-family: sans-serif;
  margin: 20px;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
}

.navbar-nav {
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

修正 HTML 中的 Navbar 标签错误：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup"> <!-- 修复闭合标签 -->
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">about</a>
        <a class="nav-link" href="#">projects</a>
      </div>
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者Nadir Esmail