Bootstrap 4 justify-space-around and justify-content-center not lining up - html

Question

I can't find a good answer for this. I'm just trying to get the centered elements to line up between the two lines, as in Bootstrap's documentation. There isn't any extra margin or padding that could be throwing them off, and there doesn't seem to be any difference between justify-content-center and d-flex on parent, mx-auto on element combination. Any ideas?
Also, is d-flex flex-column necessary on all of these or is there a more efficient way to line the label and button up so they're centered as shown?
EDIT: Here's the actual code
<div v-if="isDeepSearch" class="d-flex flex-column">
<div class="d-flex flex-column">...omitted for brevity; not relevant...</div>
<div class="d-flex justify-content-around">
<div class="d-flex flex-column text-center">
<label for="isRead">Read State</label>
<button id="isRead" type="button" class="btn btn-sm btn-danger">Unread</button>
</div>
<div class="d-flex flex-column text-center">
<label for="importance">Importance</label>
<div
id="importance"
class="btn-group mt-auto"
role="group"
aria-label="Importance buttons"
>
<button type="button" class="btn btn-sm btn-secondary">Low</button>
<button type="button" class="btn btn-sm btn-warning">Medium</button>
<button type="button" class="btn btn-sm btn-danger">High</button>
</div>
</div>
<div class="d-flex flex-column text-center">
<label for="isRead">Has Attachment</label>
<button id="isRead" type="button" class="btn btn-sm btn-success">Yes</button>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button
class="my-3 btn btn-lg btn-success"
:disabled="isSearchDisabled"
#click.prevent="search()"
>
<div v-if="!searching">
<i class="fas fa-search"></i> Search
</div>
<div v-else>
<i class="fas fa-spinner fa-spin"></i> Searching...
</div>
</button>
</div>

Answer 1

Got it. Thanks to #birdspider who cleared up my misunderstanding of justify-content-around. The issue was that the 3 items are not being centered in a 3-column-type layout, but rather ensuring that the space around them is equal. Since the items aren't all the same width, that was causing the middle element to be slightly off to the left. Solution I used was to add col-4 to each element and row to the parent.