HTML/CSS问题：.team-main容器内图片溢出导致页面横向异常

问题描述 #

我是编程新手，正在学习HTML与CSS。目前遇到两个问题：

• .team-main容器中的图片发生溢出，影响其他section的宽度，导致页面出现横向滚动/覆盖的异常情况
• 背景颜色无法铺满整个section区域

问题原因分析 #

1. 容器宽度设置不当：.team-main使用width:100vw，vw单位包含浏览器滚动条宽度，当内容总宽度超过视口时会触发横向滚动；而父元素#team已经设置width:100%，子元素无需额外设置100vw
2. margin值过大：.team-members设置了margin:3rem 5rem 5rem，固定的左右margin加上内部元素宽度，在小屏幕下会超出容器宽度；图片的margin:1rem 7rem左右边距过大，进一步加剧宽度溢出
3. 背景未铺满：.team-main设置了固定高度800px，当内容高度超过这个值时，背景颜色无法跟随内容延伸

修复方案 #

修改后的CSS代码 #

#team {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f8f9fa;
  margin-top: 5rem;
  /* 添加padding避免内容贴边 */
  padding: 0 1rem;
  box-sizing: border-box;
}

.team-main {
  /* 替换100vw为100%，继承父元素宽度 */
  width: 100%;
  /* 去掉固定高度，让高度随内容自适应 */
  min-height: 800px;
  align-items: center;
  text-align: center;
}

.team-title h1 {
  margin-bottom: 1rem;
  font-size: 40px;
}

.team-title p {
  color: #6c757d;
  font-style: italic;
  font-size: larger;
  text-align: center;
}

.team-member p {
  color: #6c757d;
  font-size: large;
  font-weight: 100;
  margin: 0.4rem 0 1rem;
}

.team-members {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* 去掉左右固定margin，改用auto居中+上下margin */
  margin: 3rem auto 5rem;
  /* 添加max-width限制最大宽度，避免大屏幕下元素过宽 */
  max-width: 1200px;
  /* 小屏幕下允许换行 */
  flex-wrap: wrap;
  gap: 2rem; /* 用gap替代margin，更灵活的间距控制 */
}

.team-members-middle {
  text-align: center;
  width: 50%;
  margin: auto;
  color: #6c757d;
}

.team-member {
  width: 100%;
  max-width: 300px; /* 限制成员卡片最大宽度 */
  box-sizing: border-box;
}

.team-member img {
  height: 220px;
  width: 220px;
  /* 改用auto让图片居中，去掉过大的左右margin */
  margin: 1rem auto;
  border-radius: 50%;
  border: 8px solid #d4d5d7;
  display: block; /* 确保margin:auto生效 */
}

.team-member .member {
  display: inline-flex; /* 改为inline-flex，让图标横向排列 */
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #111212;
  margin: 0 0.3rem; /* 添加小间距 */
}

.team-member .member i {
  font-size: 16px;
  color: white;
}

关键修改点说明 #

• 将.team-main的width:100vw改为width:100%，避免滚动条导致的宽度溢出
• 去掉.team-main的固定高度height:800px，改用min-height:800px让容器高度随内容自适应，同时保证背景铺满
• 优化.team-members的margin和布局：用margin:3rem auto 5rem让容器居中，添加flex-wrap:wrap实现小屏幕换行，用gap控制成员卡片间距
• 调整图片的margin为margin:1rem auto，并设置display:block确保水平居中，去掉过大的左右边距
• 给.team-member添加max-width，避免卡片在大屏幕下过宽；给#team添加padding和box-sizing:border-box，避免内容贴边

内容的提问来源于stack exchange，提问作者Mizgin Yıldırak