固定幅と流動幅でツラを揃える

メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニック。
CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できる。デスクトップの大きいスクリーン、スマホなどの小さいスクリーン、記事が長くてスクロールバーが表示される場合などにも対応している。

【参考】
https://coliss.com/articles/build-websites/operation/css/aligning-content-different-wrappers.html

:root {
  --wrapper-width: 1100px; //ラッパーの幅
  --wrapper-padding: 16px; //ラッパー内の水平方向のパディング
  //動的なパディング = (ビューポートの幅 - ラッパーの幅) / 2
  //スマホの場合を考慮して、max()関数で水平方向のパディングの最小値（1rem）を指定
  --space: max(
    1rem,
    calc((100% - calc(var(--wrapper-width) - var(--wrapper-padding) * 2)) / 2)
  );
}
.article-header {
    padding-left: var(--space);
}

※100vwだとmacOSではビューポート幅の100%からスクロールバー幅を引いた値となりずれてしまうので、100%で指定する。