justify-contentが効かない

下記サイトで模写コーディング中、justify-contentが効かなかったので色々調べて解決するまでの備忘録です。

https://zero-plus.io/media/css-justify-content/
justify-contentが効かない原因についてこちらのサイトにまとめられていたので引用します。

以下は justify-content が効かないおもな原因です。

①　display: flex; の指定を忘れている
②　子要素に margin: auto; を指定している
③　before・after を使用している
④ 子要素のテキストを中央寄せにしようとしている

上記の原因に当てはまっていないか自分が書いたコードとにらめっこしてしても原因がわからない...

ディベロッパーツールで見本のコードと見比べて何が違うか、調べてみたところ...

原因
入力したテキストが長くて横に伸びていた。

解決方法
テキストに<br>を入れて改行したら見本通りになりました！