cocoon、幅一杯に表示したい

とあるサイトを制作していて、ここのデザインを参考にして欲しいと提示されたサイトが画面幅一杯にブロックが表示されてるサイトだったので、cocoonでうまく表示出来る機能無いかなーと探してみたけど見つからなかったので、スタイルシートで対応する事にしました。

こちら大まかに書き残した備忘録になりますので、各自細部調整等は必要になるかと思います。

こちらカスタムCSSへ

html, body {
  overflow-x: clip;
}

body .full-width {
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  padding-top: 5em;
  padding-bottom: 5em;
}

.breadcrumb, 
.article-header, 
.article-footer {
  display: none;
}
.content,
.entry-content {
  margin-top: 0;
  margin-bottom: 0;
}
.main {
  padding-top: 0;
  padding-bottom: 0!important;
}

あとは各種ブロックの追加CSSにfull-widthを指定。

他にもデペロッパーツールで確認しながら余白調整等あちこち弄っています。