CSS位置：在同一行上阻止<span>

Question

有人告诉我我的错误是因为我需要将标语（发生生命的地方）行放在“室外”下方

.text-box {
  position: absolute;
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%);
}

.header-primary {
  color: #000;
  text-transform: uppercase;
}

.header-primary-main {
  display: block;
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 25px;
}

.header-primary-sub {
  display: block;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 14px;
}

<header>
  <div class="text-box">
    <h1 class="header-primary">
      <span class="header-primary-main">outdoors</span>
      <span class="header-primary-sub">its where life happens</span>
    </h1>
  </div>
</header>

Answer 1

尝试使用position:absolute

.text-box {
  position: absolute;
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%);
  background: url(https://www.w3schools.com/html/pic_trulli.jpg);
}

.header-primary {
  color: #000;
  text-transform: uppercase;
}

.header-primary-main {
  //display: block;
  font-size: 65px;
  font-weight: 400;
  letter-spacing: 25px;
}

.header-primary-sub {
  ///display: block;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 14px;
  position: absolute;
  top: 48px;
  width: 101%;
}

<header>
  <div class="text-box">
    <h1 class="header-primary">
      <span class="header-primary-main">outdoors</span>
      <span class="header-primary-sub">its where life happens</span>
    </h1>
  </div>
</header>