Bootstrap Divider Alignment Issues (mobile only) - css

Question

I have the following styled divider. The result on desktop when in responsive mode displays correctly. However when viewing on an actual mobile device it is breaking and left align instead of center.
I can't sort out where I went wrong in CSS, I think it is incorrect use of the margin. Since it is rendering correctly on the desktop debugger - I can't figure it out.
HTML:
<div class="divider my-3"><span class="bg-primary p-3 text-white border-radius-3">Test</span></div>
CSS:
.divider {
color: #8f9397;
width: 100%;
margin: 0 auto;
overflow: hidden;
text-align: center;
line-height: 0em;
}
.divider:before {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
content: "";
display: inline-block;
height: 0em;
margin: 0 0 0 -100%;
vertical-align: middle;
width: 50%;
}
.divider:after {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
content: "";
display: inline-block;
height: 0;
vertical-align: middle;
width: 50%;
margin: 0 -100% 0 0;
}
Result on Desktop (Responsive Mode):
Result on Mobile:

Answer 1

For me, the best way to do it like this:
.line {
height: 2px;
top: calc(50% - 1px);
}
.content {
width: max-content;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="divider text-center position-relative my-4">
<span class="line position-absolute start-0 end-0 bg-dark"></span>
<div class="content position-relative bg-white px-3 mx-auto">
<span class="bg-primary p-3 text-white border-radius-3">Test</span>
</div>
</div>