●どう対処すればよろしいでしょうか？

こんばんは。
勉強のために、下記サイトを個人のパソコン内でいじってみました。
http://fuyushougun.html.xdomain.jp/goo-sitsumon/ …
（現在こちらのサイトはレスポンシブルデザインに変更になったた
め、このデザインは採用されていません。）
長沼町の紹介、りふれ健康講座などの、合計6つのボックスがあり
ますが、これを増やしてみたところ、投稿画像の左側のように、いびつ
に配置されてしまいました。
さらにブラウザの画面内でサイトを1段階小さく（スマホでいうところのピ
ンチアウト）すると、画像右側のようにこれもいびつになります。
好きな数のボックスをきれいに並べるためには、どのように書き換えれば
よろしいでしょうか？

ボックスのHTMLを見てみると、上段（コンテナ1.コンテナ2、コンテナ3）
、下段（コンテナ1.コンテナ2、コンテナ3）の6つのボックスのHTMLソース
となっており、下段（コンテナ1.コンテナ2、コンテナ3）のHTMLコードを貼
り付けて、合計9つのボックスにしてみたのが、投稿した画像です。

どうかよろしくお願いいたします。

No.1 回答者： whtg001 回答日時： 2018/04/06 18:58

増やした部分にＣＳＳが正しく反映されていないような現象です。

cssルールが適用されるような構造のＨＴＭＬでなければなりません。

この回答へのお礼

詳細に解説お願いしますm(__)m

お礼日時：2018/04/06 19:25