Column count stacking when there is no content - html

Question

I have looked around but couldn't find anything describing my problem. I have 5 section elements in a main tag with 3 of them containing text and images.
I'm trying to get each section in a column side by side using column count, however the last two columns with no text and images stack instead of remaining next to each other. I have attached a picture below.
When I add the same images and text it works as it should but I would like to know if I can have empty columns as I do not have content for them yet.
The Code:
main {
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
}
li {
list-style: none;
}
.office {
margin-top: 5%;
display:inline-block;
width: 100%;
text-align: center;
}
.office_border {
border: 2px solid #95cccc;
width: 150px;
margin: auto;
}
.office_title {
font: normal 1.9rem DIN;
}
.office_properties {
padding: 0;
}
.office_properties_title {
font: 0.8rem 'Josefin Sans';
}
.office_properties_title_text {
font-weight: normal;
}
.office_properties_item_image {
width: 100%;
}
.office_properties_button {
padding: 5%;
}
.office_properties_link {
font-family: 'Josefin Sans';
text-decoration: none;
color: #c0392b;
}
<main>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title"> </li>
<li class="office_properties_item"> </li>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title"> </li>
<li class="office_properties_item"> </li>
</ul>
</section>
</main>

Answer 1

You can add display:inline-flex to main you can also find an example I made here, also I added support for column-count for other browsers.
If you want to watch it in the snippet click on "full page".
I hope this help:)
main {
display:inline-flex;
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
}
li {
list-style: none;
}
.office {
margin-top: 5%;
display:inline-block;
width: 100%;
text-align: center;
}
.office_border {
border: 2px solid #95cccc;
width: 150px;
margin: auto;
}
.office_title {
font: normal 1.9rem DIN;
}
.office_properties {
padding: 0;
}
.office_properties_title {
font: 0.8rem 'Josefin Sans';
}
.office_properties_title_text {
font-weight: normal;
}
.office_properties_item_image {
width: 100%;
}
.office_properties_button {
padding: 5%;
}
.office_properties_link {
font-family: 'Josefin Sans';
text-decoration: none;
color: #c0392b;
}
<main>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
</main>