2カラムのWebサイトで、改行されません

Question

前提・実現したいこと

２カラムのサイトで、左は固定カラム、右を可変カラムにしています。右カラムで、見出しの下に商品を５つ表示させました。同じように、二つ目の見出しを作ったところ、改行されずに商品の横に表示されて困っています。

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

下図における、『ランダムピックアップ』と『フッター』のところです。

該当のソースコード

商品を表示するhtml

<div id="item">
<h2>NEW</h2>
<?php $cnt = 0;
foreach ($item as $g) { ?>
<div class="new-item">
 <p class="new-img"><?php echo img_tag($g['id']) ?></p>
 <h3><?php echo $g['name'] ?></h3>
 <p><?php echo $g['price'] ?> 円</p>
 <form action="cart.php" method="post">
          <select name="num">
            <?php
              for ($i = 0; $i <= 9; $i++) {
                echo "<option>$i</option>";
              }
            ?>
          </select>
          <input type="hidden" name="code" value="<?php echo $g['code'] ?>">
          <input type="submit" name="submit" value="カートへ">
</form>
<?php 
$cnt++;
if($cnt >= 5){break;}
?>
</div>
<?php } ?>

<div id="rand-item">
<h2>ランダムピックアップ</h2>
 
</div>

/*メイン---------------------------*/
.contents{/*２カラムの親*/
	width: 100%;
 	display: flex;
}
/*ガイドメニュー設定（左）*/
#guide{
	background-color: #EEEEEE;
	width: 200px;
}

#guide li a{
	text-decoration: none;
	padding: 10px 0px;
	font-size: 20px;
}
/*コンテンツ設定（右）-----------*/
#item{
	width: calc(100% - 200px);
}

#item h2{
	border-bottom: solid 3px #0099FF;
}

.img{
	width: 100px;
	vertical-align: top;
}

.new-item{
	display:inline-block;
	width: 19%;
}

試したこと

２カラムの表示方法について調べました。phpで該当箇所を表示させているので、それが原因なのでしょうか

補足情報（FW/ツールのバージョンなど）

Answer 1

.contents とか #guide のセレクタに該当するHTMLがないし、PHPでは検証テストするのも面倒なので、とりあえず気づいた間違いだけ指摘しておきます。

<div id="item">
<h2>NEW</h2>
<?php $cnt = 0;
foreach ($item as $g) { ?>

中略

<?php } ?>

</div> ←ここに閉じタグが必要では?

<div id="rand-item">
<h2>ランダムピックアップ</h2>

</div>

Comments

[rintar]

試してみた所、改行されました！！　送信を編集しましたが、先ほどは勘違いの返信を送ってしまって申し訳ないです。本当にありがとうございました