Why do my grid columns wrap to a second line? - css

Question

I have 3 buttons using Bootstrap 4. I have defined them each to be 4 columns of the grid, so I figured they would all stay on 1 row. However the 3rd button is dropping down to the next line and I can't figure out why.
I've made a codepen here: https://codepen.io/xanabobana/pen/pobRxpx
HTML:
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-4 button button-header button-tools-collections"><h3>Tools</h3> <span class="badge"><span class="fa fa-wrench fa-2x"></span></span></div>
<div class="col-12 col-md-4 button button-header button-tools-collections"><h3>Collections</h3> <span class="badge"><span class="fa fa-folder-open fa-2x"></span></span></div>
<div class="col-12 col-md-4 button button-header button-tools-collections"><h3>Regional Projects</h3> <span class="badge"><span class="fa fa-globe fa-2x"></span></span></div>
</div></div>
CSS:
.button-header {
border: 3px solid #b8d87a;
display: inline-block;
font-size: .8em;
margin: 2em 1em 2em 0;
}
.button-header a {
color: #fff;
padding: .5em 1em;
display: block;
}
.button-header a:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, 0.3);
}
.button-header .arrow {
font-family: arial;
}
.button-tools-collections a {
color: black;
text-align: center;
}

Answer 1

You've put styles on the columns that make them wider. That's not a good practice. Use layout elements for layout and put elements inside those for styling.
<div class="col-12 col-md-4">
<div class="button button-header button-tools-collections">
<a href="<?php echo site_url('products/tools/'); ?>">
<h3>Tools</h3>
<span class="badge"><span class="fa fa-wrench fa-2x"></span></span>
</a>
</div>
</div>