在元素显示问题之前移动

Question

在普通浏览器中看起来像什么......

在移动设备上看起来像什么......

main > header > div {
  width: 100%;
  color: #FFFFFF;
  margin-top: -71.71%;
  text-align: center;
}

main > header > div div {
  display: block;
  width: 100%;
}

main > header > div div::before {
  content: "";
  height: 9.8vw;
  min-height: 3.55rem;
  width: 950px;
  background-color: red;
  position: absolute;
  margin-left: -950px;
  opacity: 0.5;
}

main > header h1 {
  font-family: 'Poppins', sans-serif;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 0 1rem;
  margin: 0;
  display: inline;
  font-size: 210%;
}

<main>
  <header>
    <div>
      <img src="./images/ks.svg">
      <div>
        <h1>WELCOME TO</h1>
      </div>
      <div>
        <h1>KYLE SULLIVAN'S</h1>
      </div>
      <div>
        <h1>PORTFOLIO</h1>
      </div>
      <div>
        <h2>Design | Develop | Deploy</h2>
      </div>
    </div>
  </header>

如果您有任何想法导致此行为，请提供帮助。

正如你所看到的那样，我试图让文字背景显示为远离左侧。

谢谢， 凯尔