There is a row consisting of three elements: left, center, and right.
However, the problem lies in the fact that the center element is not aligned at the screen level, but rather at the row level.
Is there a solution to align this element at the screen level?
Furthermore, when the screen size is reduced (especially on mobile devices), the row gains horizontal scrolling functionality, but it remains aligned to the left. Is there any way to always keep it centered and responsive?
For a demonstration, you can check out this link.
Here's the code:
<span style="width:100%; justify-content:center; display:flex">Center!!</span>
<div class="d-flex justify-content-between flex-nowrap myrow">
<div>
<span style="margin-right:10px">align me in left</span>
<span>align me in left</span>
</div>
<div>
<span>align me in center</span>
</div>
<div>
<span>align me in right</span>
</div>
</div>