设置含背景图容器的左右margin时背景图偏移错位问题求助

给包含背景图的容器的父元素设置左右margin后，背景图不再居中，反而向右偏移，相关代码如下：

HTML代码 #

<section class="section--1">
  <div>
    <div class="photo--container">
      <h1 class="logo">Ableton</h1>
    </div>
  </div>
  <div class="text--container">
    <p class="text--main__1">
      ...
    </p>
    <p class="text--main__2">
      ...
    </p>
  </div>
</section>

CSS代码 #

body {
  margin: auto;
  max-width: 98rem;
  height: 500rem;
}

.section--1 {
  max-width: 100%;
}
.section--1 div:first-child {
  margin: -12rem 8% 0 8%;
}
.photo--container {
  background: url("images/header.avif") center/cover;
  width: 100%;
  height: 40rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

问题原因 #

父元素.section--1 div:first-child设置左右8%的margin后，其内容宽度为父元素（.section--1）宽度减去16%，而.photo--container的width:100%是基于这个缩小后的内容宽度。背景图的center定位是相对于.photo--container自身的宽度，若背景图原本是适配body最大宽度（98rem）设计的，缩放后视觉上就会出现向右偏移的情况。

解决办法 #

方法1：用padding替代margin（推荐） #

将父元素的左右margin换成padding，同时给父元素添加box-sizing: border-box，确保padding包含在宽度内，这样子元素的宽度就能和body保持一致：

.section--1 div:first-child {
  margin: -12rem 0 0 0; /* 移除左右margin */
  padding: 0 8%; /* 设置左右padding */
  box-sizing: border-box;
  width: 100%;
}

方法2：基于视口定位背景图 #

如果必须保留margin，可将背景图的定位改为基于视口中心，确保背景图始终和视口居中对齐：

.photo--container {
  background: url("images/header.avif") 50vw/cover; /* 用50vw替代center */
  /* 其他样式保持不变 */
}

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