Hello,

This behavior because of all elements in the container div(panel) are positioned according to the class "justify-content-between". In this case, we have only two divs so tag ''a" always will be positioned in the center between left side 'div' and right side 'div'. In your case the right side smaller than the left side and "a" closer to the right side.

One of the options to solve this problem is to add style "position: relative" to the "panel" and to add styles "position: absolute; left: 50%; transform: translateX(-50%);" to the "a" tag. So "a" always be positioned in the middle of the panel. Here is the example:

<MDBCardHeader 
    className="view view-cascade gradient-card-header blue-gradient d-flex justify-content-between align-items-center py-2 mx-4 mb-3"
    style={{ position: "relative" }}
>
....
<a 
    href="#!" 
    className="white-text mx-auto" 
    style={{ position: "absolute";  left: "50%"; transform: "translateX(-50%)"; }}
 >
    Table name
 </a>
    ...
</MDBCardHeader>

Best regards,

Aliaksandr from MDB.