最後の画像だけ下に出る

Question

模写を今しているのですが
画像のようになぜか三行目ができてしまいます
画像のサイズは全て揃えているはずなのになぜなのかわかりません
上の段ではうまく行っています
どなたかご回答よろしくお願いします

<sction class="mesures">
        <div class="mesures-container">
            <h2>安心してレッスンを受けていただく取り組み</h2>
           <div class="mesures-contents">
              <div class="Initiatives mask">
                  <img class="all" src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/avoid01.png">
                  <p>マスクの着用</p>
              </div>
              <div class="Initiatives kanki">
                  <img class="all" src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/avoid03.png">
                  <p>室内換気の徹底</p>
              </div>
              <div class="Initiatives akril">
                  <img class="all" src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/avoid02.png">
                  <p>飛沫防止アクリル板</p>
              </div>
              <div class="Initiative taityou">
                  <img class="all" src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/avoid04.png">
                  <p>体調確認のご協力</p>
              </div>
              <div class="Initiative teaeai">
                  <img class="all" src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/avoid05.png">
                  <p>手洗いうがいの消毒の徹底</p>
              </div>
              <div class="Initiative shoudoku">
                  <img class="all" src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/avoid06.png">
                  <p>教室内の清掃</p>
              </div>  
           </div>
        </div>
    </sction>

.mesures-container {
  margin:auto;
  border:4px solid;
  border-color: black;
  width:980px;
}

.mesures-container.h2 {
  text-align: center;
}

.mesures-contents {
  padding:10px;
  display: flex;
  flex-wrap:wrap;
}

.Initiatives {
  width:33%;
  flex:auto;
}

.all {
  width:330px;
  height:282.45px;
}

Answer 1

後の３つのdivタグのクラス名が間違ってます。
<div class="Initiative taityou">
上記を下記に修正すれば、
<div class="Initiatives taityou">

下記が適用されて3列になります。

.Initiatives {
  width:33%;
  flex:auto;
}

あと、img に width: 330px; が設定してあるので、親要素をはみ出ています。（親要素は320px）

.all {
  width:330px;
  height:282.45px;
}

上記を下記に修正しましょう。

.all {
  width: 100%;
  height: auto;
}

Comments

[sige2232]

ご回答ありがとうございます
初歩的なミスをしないように頑張ります。。。