解答のサンプル

<div class="content">
  <div class="section">
    <h2>見出し1</h2>
    <p>テキストが入ります。</p>
  </div>
  <div class="section">
    <h2>見出し2</h2>
    <p>テキストが入ります。</p>
  </div>
  <div class="section">
    <h2>見出し3</h2>
    <p>テキストが入ります。</p>
  </div>
</div>

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  outline: 2px dashed #c00;
  box-sizing: border-box;
}

.section {
  padding: 20px 0;
}

.section:nth-child(2) {
  margin: 0 calc(50% - 50vw);
  padding: 20px calc(50vw - 50%);
  background: #fcc;
}

元記事を表示する