无法移除Contact Me右侧空白区域，求前端解决方案

问题原因 #

• 导航栏的ul设置了固定宽度width:500px，并使用justify-content: space-around，导致三个导航项在500px宽度内均匀分配空间，Contact Me右侧被迫留出空白。
• nav标签中混入了不属于导航栏的.glow元素，结构混乱干扰布局。
• nav里多余的空<div></div>也占用了布局位置。

修复步骤 #

1. 调整HTML结构

将.glow模块从nav中移出，放到section内部，保证导航栏结构纯净：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="src/aboutMeStyle.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Acme&family=Poppins&display=swap" rel="stylesheet">
  <title>About Me</title>
  <meta charset="UTF-8">
</head>
<body>
  <section class="hero">
    <nav>
      <img class="logo" src="images/pack.png" alt="Futsunohitos Logo">
      <img class="logo2" src="images/32x_ava.png" alt="Futsunohitos Logo">
      <ul>
        <li><a href="file:///C:/Users/tttei/OneDrive/Desktop/website/index.html" class="home"> Home </a></li>
        <li><a href="file:///C:/Users/tttei/OneDrive/Desktop/website/index.html" class="myw"> My Work </a></li>
        <li><a href="file:///C:/Users/tttei/OneDrive/Desktop/website/index.html" class="cm"> Contact Me </a></li>
      </ul>
    </nav>
    <div class= "glow">
      <p class="Description">Hello Im Oleg. Im 18 years old. I like to draw and make cool art. I take orders and can make you a custom avatar or anything you ask for. Ofcourse its gonna be really cheap I just want to start my own little business. I hope you enjoy my art (and maybe hire me). Have a great day!</p>
    </div>
  </section>
  <script src="src/app.js"></script>
</body>
</html>

2. 修改CSS样式

• 移除ul的固定宽度，用gap控制导航项间距，让导航栏自适应内容
• 优化nav的垂直对齐，给导航栏右侧留适当边距
• 修正全局p的样式，仅给描述文本设置定位：

body{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  overflow-y: hidden;
  overflow-x: hidden;
}
section {
  background-color: gray;
}
.hero {
  background-color: #1c1d25;
  height: 100vh;
  color: white;
  font-size: 40px;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul {
  display: flex;
  list-style-type: none;
  gap: 30px;
  font-size: 20px;
  margin-right: 30px;
  padding: 0;
}
li {
  text-decoration: none;
}
h1 {
  font-size: 90px;
  margin: 0;
}
.logo {
  height: 100px;
  margin: 30px;
}
.home, .myw, .cm {
  text-decoration: none;
  color: white;
}
.logo2{
  width: 400px;
  position: relative;
  margin-top: 200px;
  margin-left: -200px;
  border: 5px dotted purple;
}
.Description {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5vw; 
  position: absolute; 
  left: 40vw; 
  bottom: 40vh;
  width:50%;
  margin:0;
}

额外提示 #

• .logo2的margin-left: -200px会导致它与左侧logo重叠，可根据视觉需求调整该值
• 原代码中<script>"src/app.js"</script>写法错误，已修正为标准的脚本引入格式

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