制作网页头部时宽度异常溢出 如何调整缩小网页宽度？

你的页面出现横向滚动、右侧存在大片空白，是以下几个代码问题共同导致的：

1. HTML结构不符合规范：所有可见的header内容被错误放在了<head>标签内。<head>标签仅用于存放页面元数据（标题、样式引入、字符集声明等），所有用户可见的页面内容必须放在<body>标签内部，浏览器解析错位的HTML结构时会出现不可预期的渲染问题。同时代码中包裹logo的<a>标签没有闭合，标签嵌套层级混乱，也会干扰正常渲染。
2. 宽度设置逻辑错误：给header写死了width: 1440px的固定宽度，再搭配左右各-8px的负margin，当访问者的视口宽度小于1440px时，header的实际渲染宽度会超出视口范围，直接触发横向滚动条。
3. 导航排版方式有问题：通过position: relative搭配left: 450px、top: -175px的硬偏移调整导航位置，相对定位的元素只是视觉位置发生偏移，它在正常文档流中占据的位置会被保留，偏移超出父容器的部分会直接撑大页面整体宽度，催生横向溢出。

按以下步骤调整即可解决问题：

• 首先添加全局样式重置，清除浏览器默认自带的8px边距，不需要再用负margin手动抵消：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 修正HTML结构，将header模块整体移动到<body>标签内部，补全未闭合的标签，理顺嵌套关系：

<!DOCTYPE html>
<html>
<head>
    <title>Hyard - 2022 Based Programming group</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="header">
      <a href="index">
        <img src="images/logo.png" alt="head-logo" height="200" width="200" />
      </a>
      <nav class="mainnav">
          <ul>
              <li><a href="projects/selector">Projects</a></li>
              <li><a href="en/about">About</a></li>
              <li><a href="en/versions">Versions</a></li>
          </ul>
      </nav>
  </div>
</body>
</html>

• 调整header和导航的CSS样式，移除固定宽度，改用flex布局实现logo和导航的横向排列，替换掉原来的硬偏移排版逻辑：

.header {
  background-color: aqua;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.mainnav ul {
  font-size: 50px;
  list-style: none;
  text-transform: uppercase;
  display: flex;
  gap: 30px; /* 控制导航项之间的间距 */
  margin-left: 230px; /* 控制导航和logo之间的距离，可按需调整数值 */
}

.mainnav ul a {
  color: gray;
  text-decoration: none;
}

.mainnav ul a:hover {
  color: black;
}

调整后header会自动适配不同屏幕宽度，不会再出现横向滚动条和右侧无内容的空白区域。

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