如何让nav导航栏占满100%视口 消除右侧空白与横向滚动条

问题根源 #

你遇到的横向溢出、右侧空白问题由3个核心错误导致：

1. 导航栏内部宽度溢出：<ul class="nav-list">同时设置了width: 100%和margin-left: 13%，总宽度超出父容器<nav>的100%视口宽度，同时你没有清除<ul>的默认左内边距，额外增加了元素宽度。
2. 主体内容偏移溢出：所有主体内容（标题、按钮、图片）都使用position: relative + left: 280px/300px的方式右移，相对定位的元素偏移后不会收缩原有占位空间，直接将元素整体向右推出视口，撑出横向空白。
3. 全局样式重置不全：只清除了元素的默认外边距，没有清除默认内边距，也没有限制页面横向溢出。

修复步骤 #

1. 完善全局样式重置 #

修改通配符和body样式，清除默认边距、限制横向溢出：

* {
  margin: 0;
  padding: 0; /* 新增，清除所有元素默认内边距 */
  box-sizing: border-box; /* 新增，内边距/边框不会额外增加元素宽度 */
}
body {
  overflow-x: hidden; /* 新增，禁止横向内容溢出产生滚动条 */
}

2. 修复导航栏布局 #

导航本身是flex布局，不需要给子元素强制设100%宽度，修改<ul class="nav-list">样式：

ul.nav-list {
  list-style: none;
  /* 删除原有的width: 100%，flex容器会自动分配剩余宽度 */
  margin: 0 0 0 13%;
  display: flex; /* 用flex代替浮动布局，更稳定 */
  gap: 5px; /* 代替li的左右外边距 */
}
/* 删除ul.nav-list li里的float: left属性，flex布局不需要浮动 */

3. 优化主体内容布局 #

不要用position: relative + left的方式做内容右移，改为给父容器.main-text加内边距控制位置：

.main-text {
  padding-left: 300px; /* 代替所有子元素的left:300px设置 */
  padding-top: 200px; /* 代替所有子元素的top:200px设置 */
}
/* 删掉.text-title、.title、.pos-text、.hire、.get-cv样式里的position: relative、top、left属性 */
/* 修改图片样式，去掉相对定位偏移 */
img.main-img{
  width: 700px;
  margin-left: 280px;
  margin-top: -90px;
  z-index: -1;
}

临时快速修复 #

如果暂时不想调整布局逻辑，仅需消除右侧空白和横向滚动条，直接给body加一行样式即可：

body {
  overflow-x: hidden;
}

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