HTML/CSSでの画像配列について

boxA(box1～3）については横配列になるのですが、boxbのbox（box４～６）が横配列になりません。
画像にかぶらずに綺麗に横配列になるようご教示お願い致します。(画像の下部分は気にしないでください。）

html
1
2　　　<div class="boxA">
3      <div class="box1">
4        <p>チョコケーキ 4号(直径12ｃｍ)～</p>
5        <img src="../img/syouhin_gazou1.jpg" height=200 width=250>
6      </div>
7      <div class="box2">
8        <p>ココナッツクッキー(5枚入)</p>
9        <img src="../img/syouhin_gazou1.jpg" height=200 width=250>
10      </div>
11      <div class="box3">
12        <p>チョコレートクッキー(5枚入)</p>
13        <img src="../img/syouhin_gazou1.jpg" height=200 width=250>
14      </div>
15      </div>
16
17      <div class="boxB">
18      <div class="box4">
19        <p>プレーンロールケーキ　長さ20cm</p>
20        <img src="../img/syouhin_gazou1.jpg" height=200 width=250>
21      </div>
22      <div class="box5">
23        <p>コーヒーロールケーキ　長さ20cm</p>
24        <img src="../img/syouhin_gazou1.jpg" height=200 width=250>
25      </div>
26      <div class="box6">
27        <p>シュークリーム</p>
28        <img src="../img/syouhin_gazou1.jpg" height=200 width=250>
29      </div>
30      </div>

css
1.boxA:after  {
2  content: "";
3}
4.box1{background-color: #FFFFFF;
5  width: 33.3333%;
6  height: 200px;
7  float: left;
8  padding-top: 20px;
9  padding-bottom: 50px;
10}
11.box2{background-color: #FFFFFF;
12  width: 33.3333%;
13  height: 200px;
14  float: left;
15  padding-top: 20px;
16  padding-bottom: 50px;
17}
18
19.box3{background-color: #FFFFFF;
20  width: 33.3333%;
21  height: 200px;
22  float: left;
23  padding-top: 20px;
24  padding-bottom: 50px;
25}
26
27.boxB:after  {
28  content: "";
29}
30.box4{background-color: #FFFFFF;
31  width: 33.3333%;
32  height: 200px;
33  float: left;
34  padding-top: 20px;
35  padding-bottom: 50px;
36}
37.box5{background-color: #FFFFFF;
38  width: 33.3333%;
39  height: 200px;
40  float: left;
41  padding-top: 20px;
42  padding-bottom: 50px;
43}
44
45.box6{background-color: #FFFFFF;
46  width: 33.3333%;
47  height: 200px;
48  float: left;
49  padding-top: 20px;
50  padding-bottom: 50px;
51}

m.ts10806

2018/06/28 03:43

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

m.ts10806

2018/06/28 03:53

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。