如何消除页面左右白边，使容器完全适配页面宽度？

你的问题出在**固定的左右内边距（padding）**和未完全重置的浏览器默认样式上，以下是具体修复步骤：

1. 完善基础样式重置 #

首先彻底清除默认边距，并统一盒模型，避免宽度溢出：

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0; /* 移除ul默认的左内边距 */
}

2. 替换固定左右padding为自适应布局 #

你之前给.logo、.links、.about-text等元素加了固定的padding-left:150px/padding-right:150px，这会导致容器无法撑满页面宽度。改成给容器设置最大宽度+自动居中，内部用小padding留白：

修改.header和.about容器 #

.header,
.about {
  background-color: #1f2937;
  max-width: 1200px; /* 限制内容最大宽度，适配大屏 */
  width: 100%;
  margin: 0 auto; /* 让容器居中，同时撑满页面宽度 */
  padding: 0 20px; /* 小左右padding适配小屏 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 100px;
}

/* 移除.logo的padding-left和.links的padding-right */
.logo {
  color: #F9FAF8;
  font-size: 24px;
  font-weight: bolder;
  display: flex;
  flex: 1 0 auto;
}

.links {
  font-size: 18px;
  display: flex;
  flex-shrink: 0;
  gap: 16px;
}

.about {
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
  align-items: center;
}

/* 移除.about-text的padding-left和.header-image的padding-right */
.about-text {
  /* 原padding-left:150px 删除 */
}

.header-image {
  width: 400px;
  height: 285px;
  display: flex;
  flex-shrink: 0;
  padding-bottom: 25px;
}

修复quote区域的固定边距 #

原.quote用固定高度和大padding导致左右留白，改成自适应padding+内容居中：

.quote {
  background-color: #e5e7eb;
  padding: 100px 20px; /* 替换固定高度 */
}

.quote-text {
  font-size: 36px;
  color: #1f2937;
  font-style: italic;
  font-weight: lighter;
  max-width: 755px;
  margin: 0 auto 20px; /* 内容居中 */
}

.author {
  font-size: 24px;
  color: #1f2937;
  font-weight: bolder;
  max-width: 755px;
  margin: 0 auto;
  text-align: right; /* 作者右对齐 */
}

3. 验证其他容器 #

.information、.action、.footer这些容器本身没有固定左右padding，修改后会自动撑满页面宽度，内部内容保持居中即可。

这样修改后，页面左右的白边会消失，容器完全适配页面宽度，同时内容在大屏上保持居中，小屏上有合适的留白。

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