Как динамически позиционировать абзац в начале центрированного заголовка

Question

Вопрос тривиальный, но когда я начал думать об этом, я не мог найти легкий и правильный выход.

Я хочу, чтобы мой заголовок был центрирован, а затем я хочу, чтобы мой параграф был выровнен по началу заголовка. Также Я хочу, чтобы абзац был соответствующим образом выровнен по заголовку на всех устройствах до 770px

Чего бы я хотел избежать

1. JS подход

2. приближение жестоких точек останова

Что бы я хотел сделать

1. Некоторые функции sass mixin

2. Некоторая логика контейнера HTML

3. Какой-то неизвестный мне метод выравнивания

По центру для ширины по умолчанию

Ширина становится больше

.container .intro-panel {
  width: 100%;
  height: 650px;
  background-image: url(https://i.imgur.com/M7gDO41.jpg);
  background-size: cover;
  position: relative;
  color: white;
  padding-top: 130px;
  box-sizing: border-box;
  font-family: Shrikhand; }
  .container .intro-panel h1 {
    font-size: 36px;
    text-align: center;
    letter-spacing: 20px;
    text-indent: 30px;
    text-transform: uppercase; }
  .container .intro-panel p {
    font-size: 16px;
    margin: -25px 0 0 -25.5%;
    letter-spacing: 2px;
    text-align: center; }
  .container .intro-panel .button-wrap {
    width: 100%;
    margin-top: 160px; }
    .container .intro-panel .button-wrap .see-more {
      margin: 0 auto;
      width: 280px;
      height: 40px;
      line-height: 44px;
      cursor: pointer;
      font-size: 25px;
      text-align: center;
      margin-top: 140px;
      background-color: #003DE8;
      -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); }

<div class="container">
  <div class="intro-panel" data-tilt>
      <h1 class="intro-name title">Edgars Pavuls</h1>
      <p>Professinal Web Application Developer</p>
      <div class="button-wrap">
          <div class="vibrate-3 see-more">
              See More
          </div>
      </div>
  </div>
</div>

Answer 1

<div class="container">
    <div>
       <h1>Lorem ipsum dolor sit amet.</h1>
       <h2>Lorem ipsum dolor.</h2>
    </div>
</div>

.container{
   display: flex;
   justify-content: center;
   align-items: center;
}

https://www.codeply.com/go/i3RlmpoZMD

Answer 2

Этого можно добиться, обернув заголовок и текст в элемент встроенного блока, а затем выровняв текст по левому краю

Обратите внимание, что если ваш текст должен быть длиннее, чем заголовок, он будет отцентрирован, а заголовок выровнен по левому краю, то есть самый длинный элемент будет отцентрирован

.outer {
  /* put background on here */
  text-align: center;
}

.centre {
  display: inline-block;
  text-align: left;
}

<div class="outer">
  <div class="centre">
    <h1 class="heading">This is some long text</h1>
    <p class="text">some other text</p>
  </div>
</div>