bootstrapにおいてcontainerクラス内のimgがcontainerクラスdivタグの範囲からはみ出してしまう。

Question

前提・実現したいこと

bootstrapにおいてcontainerクラス内のimgがcontainerからはみ出してしまうので、収めたい。

発生している問題・エラーメッセージ

containerクラスdivタグ内のimgがcontanerの幅からはみ出てページにめいいっぱいに広がってしまう。このことは背景色の違いにより確認した。

該当のソースコード

<div class="container bg-white py-5 mx-5"> <div　id="column"> <h2 class="text-center py-3">Bootstrapの特徴</h2> </div> <div class="row"> <div class="col-md-4 col-12"> <img class="img-fluid" src="img/img4.jpg"> </div> <div class="col-md-4 col-12"> <img class="img-fluid" src="img/img5.jpg"> </div> <div class="col-md-4 col-12"> <img class="img-fluid" src="img/img6.jpg"> </div> </div> </div>

試したこと

他のteratailを調べた結果解決策として挙げられた,img-responsiveを用いてみたり、style="margin:auto"を試したが改善されなかった

Answer 1

divタグの指定範囲を見誤っていた。
containerクラス内にrowクラスが含まれていなかった。