如何让首页区块（home section）的绿色背景铺满整个宽度？

1. 实现全屏绿色背景 #

给<section class="home">设置背景色，同时清除默认边距确保铺满宽度：

.home {
  width: 100%;
  background-color: #2ecc71; /* 替换为你需要的绿色值 */
  padding: 0;
  margin: 0;
}

2. 限制内容容器宽度并居中 #

修改.home_container的样式，让内部内容（含图片）被限制在指定宽度内并水平居中：

.home_container.bd-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem; /* 可选：避免内容贴边 */
  box-sizing: border-box; /* 确保内边距不会撑开容器宽度 */
}

3. 防止图片超出容器 #

给图片设置自适应规则，确保它不会溢出父容器：

.home_img {
  max-width: 100%;
  height: auto; /* 保持图片比例 */
  display: block; /* 清除图片默认行内间距 */
}

完整修改后的CSS代码 #

替换你原有无效的CSS代码：

.home {
  width: 100%;
  background-color: #2ecc71; /* 自定义绿色 */
  padding: 0;
  margin: 0;
}

.home_container.bd-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.home_img {
  max-width: 100%;
  height: auto;
  display: block;
}

关键说明 #

你之前写的.main-1和.container类没有对应到HTML中的实际元素，所以完全不起作用。需要针对页面中存在的.home、.home_container、.home_img类编写样式，才能解决背景铺满和图片溢出的问题。

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