Как создать этот макет?Ребенок шире, чем родительский / отступы / flexbox?

Question

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

У меня есть два деления.Макс. Ширина заголовка 500px.Основной div max-width 400px.Основной div должен быть центрирован горизонтально в окне браузера.Левый край заголовка должен соответствовать левому краю основного блока.Увидеть ниже.Красная линия - это центр окна браузера:

Я добился этого, добавив div обертки с максимальной шириной 500 пикселей (розовыйцвет) и используя дополнительную обивку на левой стороне.Это работает в точку.Но при меньших размерах экрана дополнительный отступ слева сбивает макет с центра.

Так как мне создать этот макет?Я предполагаю, что не могу добавить заголовок div как дочерний элемент основного div, потому что дочерний элемент не может быть шире, чем его родитель.Я думаю, что flexbox может быть ответом, но я никогда не использовал Flexbox.

Это код, который у меня есть: https://jsfiddle.net/aqpyzogc/

 <div class="wrapper">
    <div class="heading"></div>
    <main></main>   
</div>


.wrapper {
    max-width:500px;
    margin:0 auto; 
    padding:0 0 0 100px;
    background-color:lightpink;
    }

.heading {
    max-width:500px;
    background-color:cyan;
    height:100px;
    }


main {
    max-width:400px;
    background-color:grey;
    height:500px;
    }

Answer 1

Но при меньших размерах экрана дополнительное заполнение слева выбивает макет из центра.

Вы можете рассчитать правильное количество отступов для этих размеров области просмотрас использованием функции calc().

Ниже ширины области просмотра 600 пикселей оставшееся пространство составляет 100% минус 400 пикселей, и нам понадобится половина этого значения для отступа слева, поэтому:

body {
  margin: 0;
}

.wrapper {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 0 0 100px;
  background-color: lightpink;
}

@media (max-width: 600px) {
  .wrapper {
    padding-left: calc((100% - 400px) / 2);
  }
}

.heading {
  max-width: 500px;
  background-color: cyan;
  height: 100px;
}

main {
  max-width: 400px;
  background-color: grey;
  height: 500px;
}

<div class="wrapper">
  <div class="heading"></div>
  <main></main>
</div>

Здесь я также установил поля тела равными 0, так что все это соответствует точке останова 600px.Если вам нужны эти дополнительные поля, вы должны указать их в расчете значения точки останова.

Fiddle: https://jsfiddle.net/aqpyzogc/1/