I currently have a row of three Bootstrap boxes structured like this:
<div class="row">
<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>
<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>
<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>
</div>
My custom CSS modifies the size and adds borders to the content boxes like this:
.pathBoxMain {
border: 5px solid black;
padding: 10px 0px 0px 0px;
height: 175px;
}
Currently, the boxes are all touching due to lack of spacing. I've attempted various methods to add space between them without throwing off their alignment within the row (such as adjusting widths, margins, or adding empty columns). However, these changes disrupt the centered layout of the boxes.
Is there a way to add space between the content boxes while keeping them evenly centered?