Tailwind mx-auto not centering 1 of 2 angular material block elements

I have an app component with two children components, both with mx-auto but only the second one is centered. The solution I found to center my header was to add justify-self-center or applying raw CSS margin:auto but I still want to know why this happens.

Header Component HTML:

<mat-toolbar class="max-w-7xl mx-auto border-x justify-between">
<a routerLink="home">store</a>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon [matBadge]="1" matBadgeColor="warn">shopping_cart</mat-icon>
</button>
<mat-menu #menu="matMenu">

</mat-menu>
</mat-toolbar>


Home Component HTML:

<mat-drawer-container [autosize]="true" class="min-h-full max-w-7xl mx-auto border-x">

</mat-drawer-container>


App Component HTML:

<app-header></app-header>
<app-home></app-home>

Continue reading...