x1c 0d1x当我在一个有背景图像的容器上增加左边/右边的边距时，图像开始奇怪地暴露出来。它移到右边，不再居中。

<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;
}