HTML

<div class="bg-box">

<div class="bg-box__item">

<div class="bg-box__item__box">
<figure><img src="images/cloud.JPG" alt="画像"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

<div class="bg-box__item__box">
<figure><img src="images/sakura.JPG" alt="画像"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

<div class="bg-box__item__box">
<figure><img src="images/yama.jpg" alt="画像"></figure>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>

</div>

</div>

全体を.bg-boxで囲んでいます｡ここが､全体の背景を決める､クラスです｡そのあと､itemで3つのboxを囲んでいます｡

全体(bg-box)→コンテンツを囲む(item)→コンテンツを書く(box)となります｡

SCSS

.bg-box{
background: #f3f3f3;
padding: 1rem;
&__item{
display: flex;
gap: 10px;
max-width: clamp(22.813rem, calc(4.773rem + 76.97vw), 62.5rem);
margin-left: auto;
margin-right: auto;
&__box{
width: calc(100% / 3 - 10px);
}
}
}

.bg-boxに対して背景を決めます(background: #f3f3f3)｡背景色はお好みでいいです｡サイトのイメージに合わせましょう｡

itemに対してdisplay: flexを書きます｡これで3つのboxが横並びになります｡

さいごに､boxのサイズをcalcで計算します｡width: calc(100% / 3 - 10px)｡

ちなみに､widthを書かないと画像のサイズがおかしくなります｡なので､flexで横並びにするさいは､widthが必須かなと思います｡

それより簡単なのは､gridですね｡あまり深く考えなくていいです｡

ただ､flexの方が色々と使い勝手がいいので､今はflexを使っています｡

なお､max-widthはサイトのイメージに合わせましょう｡ここでは､365pxから1000pxにしています｡

僕が作るサイトは､大体､このサイズです｡最大で1200pxですが､これはサイトのイメージに合わせます｡あまりに大きいと目ざといので､最適なサイズを求めています｡

CSS

.bg-box {
  background: #f3f3f3;
  padding: 1rem;
}
.bg-box__item {
  display: flex;
  gap: 10px;
  max-width: clamp(22.813rem, 4.773rem + 76.97vw, 62.5rem);
  margin-left: auto;
  margin-right: auto;
}
.bg-box__item__box {
  width: calc(33.3333333333% - 10px);
}

書いていることは､SCSSの内容と同じ｡書き方が違うだけです｡ちなみに､下線は2つです｡どちらがいいかは､人それぞれ｡僕はSCSSを書いています｡最終的にCSSにコンパイルする必要がありますが､SCSSの方が好きです｡

意外に簡単なので､興味のある方はお試しあれ｡

さいごに

これが絶対的に正しいことはありません｡正解は1つではありません｡あくまで一例ですが､これで大体､上手く行きます｡

背景色を変えたい場合はお試しあれ｡