Сохранить заголовок текста в том же положении по отношению к фоновому контейнеру

Question

У меня есть заголовок h1 внутри родительского контейнера, и мне бы хотелось, чтобы независимо от ширины экрана, текст h1 всегда находился в одной и той же позиции по отношению к родительскому контейнеру (т. Е. С серым фоном).

Когда я уменьшаю размер окна, серый родительский контейнер выходит из выравнивания, как если бы он перемещался влево с большей скоростью, чем текст перемещается влево?

Я почти уверенэто возможно, но это сводит меня с ума, пытаясь найти способ сделать это.

Также Я ДОЛЖЕН использовать вычисление ширины, данное в родительском контейнере, по причинам, по которым нет смысла идтив.

Любая помощь будет потрясающей.

Codepen: https://codepen.io/emilychews/pen/NZoMbQ

или

Фрагмент кода ниже.

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  width: 100%;
}

.section {
  position: relative;
  display: flex;
  margin: 0 auto; 
  width: 100%;
  padding: 3.583rem 0;
  box-sizing: border-box;
  height: 100vh;
}

.left-background-box {
  height: 100%;
  background: lightblue;
  width: calc(10% + (27.133% - 1rem));
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  font-family: arial;
  font-size: 3rem;
  position: relative;
  left: 65%;
  margin: 1.728rem 0;
  line-height: 4.299rem;
  width: 30rem;
}

<section class="section">
    <div class="left-background-box">
        <h1 class="heading">This is a good two<br>
          Line Title to use
      </h1>
        <h3 class="subheading">Focused on the Issues That Affect You.</h3>
    </div>
</section>

Answer 1

Причина, по которой ширина .left-background-box изменяется с частотой, отличной от положения .heading, заключается в том, что у одного вычисление ширины основано на процентах и ​​статических значениях, а у другого - только значение атрибута left на основев процентах.

Если вам нужно использовать конкретный calc для ширины .left-background-box, вы должны использовать его также в left из .heading.Вы также можете упростить его до calc(37.133% - 1rem).

Единственное отличие состоит в том, что вам нужно сделать еще несколько вычислений, чтобы скорректировать ту же скорость, потому что .heading вложено в .left-background-box и процент будет учитыватьсяего родительская ширина.Но если у вас есть раздел с полной шириной в качестве родителя обоих, вы можете использовать те же значения, используя vw вместо %.Вы также можете настроить «статическое» значение (здесь -1rem для настройки выравнивания заголовка)

Вот пример: codepen