回答編集履歴

1 スマホ表示時のことを追記しました

mai1210

mai1210 score 269

2021/03/25 09:40  投稿

質問内容の編集ありがとうございました。
`.container-two`に対して`flex-direction: column;`がかかっているので、子要素が縦並びになっています。
`flex-direction: column;`の削除で3つ横並びになるかと思います。
```CSS
.container-two {
 -webkit-box-direction: normal;
 -webkit-box-orient: vertical;
 -webkit-box-pack: justify;
 -webkit-box-align: start;
 max-width: 1760px;
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 /*flex-direction: column;*/
}
```
[https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction](https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction)
[https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction](https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction)
逆に`flex-direction: column;`をかけると縦並びになるので、画面幅が狭い時に縦並びにしたい場合は、`.container-two`と`.hosting-chapter`に`flex-direction: column;`をかけてください。
※HTMLの構成が変わっていない前提です。
```CSS
@media screen and (max-width: 744px) {
 .container-two, .hosting-chapter {
   flex-direction: column;
 }
}
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る