如何移除着陆页Container留白，实现全屏显示

嘿，我来帮你搞定这个全屏显示的留白问题！你遇到的右侧边距，主要是Bootstrap默认样式和图片定位方式导致的，咱们一步步来修复：

问题根源拆解 #

• Bootstrap的container类本身是固定宽度+自带左右内边距的容器，哪怕你给图片设了right:0，也没法突破这个容器的边界限制。
• 图片用position: relative定位时，它仍处于文档流中，无法真正超出父元素的范围。

具体修复方案 #

1. 替换容器类型

把container换成container-fluid——这个类是全屏宽度的容器，不过默认仍有左右padding，咱们后续清除它。

2. 重置父元素与容器的内外边距

给你的zerra-porto区块和容器添加清除内外边距的样式，彻底去掉默认留白。

3. 调整图片定位逻辑

把图片的position: relative改成absolute，让它脱离文档流；同时给父元素zerra-porto加上position: relative，确保图片相对于这个section定位，而不是整个页面。

修改后的完整代码 #

HTML部分：

<section class="zerra-porto"> 
  <div class="container-fluid"> 
    <div class="row"> 
      <div class="col align-self-center"> 
        <h1 class="mb-4"> Hi, My Name is <br /> Sumnit Parfit </h1> 
        <p>A Front End Developer</p> 
        <a href="#" role="button" class="btn btn-primary">Get to know</a> 
      </div> 
      <div class="col"> 
        <img src="/images/foto.png" alt="Profile Picture" class="landing-pic" /> 
      </div> 
    </div> 
  </div> 
</section>

CSS部分：

.zerra-porto {
  position: relative; /* 让图片基于此容器定位 */
  margin: 0;
  padding: 0;
  width: 100vw; /* 强制区块占满视口宽度 */
  overflow: hidden; /* 避免图片超出后出现滚动条 */
}

.zerra-porto .container-fluid {
  padding: 0; /* 清除容器默认左右内边距 */
}

.zerra-porto .row {
  margin: 0; /* 清除row默认负margin，可根据布局需求调整 */
}

.zerra-porto .landing-pic {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  height: 100%; /* 让图片高度匹配区块，可选 */
}

额外优化建议 #

• 如果文字部分需要保留内边距，不要给.col加padding:0，可以单独给文字所在的列设置padding-left: 2rem这类样式，平衡布局美感。
• 若图片宽度不足导致右侧仍有空隙，可添加width: auto; object-fit: cover让图片自适应铺满右侧区域。

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