我正在为网页编写一些代码，我希望它位于两个单独的列中。在列 div 标签中有分隔 div 块的人，我希望每个代码块位于不同的列中。但是，当网站显示在浏览器中时，Inside the Kitchen 之后的所有内容都会出现在第二列中。我该如何解决？
这是我的 HTML：
<div id="columns">
<div>
<h2>Cupcake of the Week</h2>
<p>This week's featured cupcake is the Avacado Chocolate cupcake. Its strange combo of flavours will kick your taste buds into fiesta mode!</p>
<img src="images/featured-cupcake.jpg">
<h2>Inside the Kitchen</h2>
<p>
Smells Like Bakin’ started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way for them to make a
business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.
</p>
</div>
<div>
<h2>Fresh Out the Oven</h2>
<p>Our newest cupcakes are Bacon Me Crazy and Jalapeno So Spicy.</p>
<img src="images/new-cupcake-bacon.jpg"> <img src="images/new-cupcake-jalapenojpg">
<h2>Get Bakin' with Us</h2>
<p>Call us: 1-555-CUP-CAKE<br>Email us: bakeon@smellslikebakin.com</p>
<p>We announce all of our new flavors first through Facebook & Twitter, and even take requests!</p>
</div>
</div>
这是我的 CSS：
#columns {
column-count: 2;
column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;
}