mat-table how to align mat-header with the mat-cell width

I'm new with flex and I have quite made good with my mat-table. Unfortunately my header is not following my cell width.

Here's a picture of my result.

As you see my header is not align with my cell.

Here's my CSS code, Like I said I'm new, so maybe I missed something.

@import "./../../styles.scss";


.mat-header-row {
    width: 100%;
  min-height: 20px;
  padding: 0px 0px 0px 4px;
}

.mat-row {
    width: 100%;
  min-height: 12px;
  display: inline-flex;
 // min-width: 100%;
}

.mat-header-cell {
  justify-content: left;
  font-size: smaller;
  font-weight: bold;
  padding: 0px 0px 0px 4px;
}

.mat-cell {
  justify-content: left;
  border-top: 1px solid crimson;
  font-size: smaller;
  padding: 0px 0px 0px 4px;
  text-align: left;
  align-items: flex-start;
}

.mat-cell-points {
  flex: 0 0 20px !important;
  white-space: unset !important;
}

.mat-cell-concession{
    flex: 0 0 200px !important;
    white-space: unset !important;
  justify-content: left;
  border-top: 1px solid crimson;
  font-size: smaller;
  padding: 0px 0px 0px 4px;
  text-align: left;
}

.rcorner1 {
  border-radius: 25px;
  background: mat-color($accent, 300);
  padding: 20px;
}

.example-container {
  display: flex;
  flex-direction: column;

  // min-width: 200px;
  max-width: 380px;
}


label {
  min-width: 15%;
}

.mat-row:nth-child(1n + 1) {
    background-color: mat-color($accent, lighter);
  }

  .mat-row:not(:nth-child(2n + 1)) {
    background-color: mat-color($primary, 300);
  }

.example-element-row:hover {
  background: mat-color($accent, 800);
}
.example-element-row:active {
  background: #efefef;
}

And my HTML code:

<div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary">
    <div class="mat-header-cell">
        {{ this.getTypeInfo(this.typeList.TypeBourse) }}
    </div>
    <mat-table [dataSource]="bourseDetail" class="mat-elevation-z8">
        <!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 -->
        <!-- Position Column -->
        <ng-container matColumnDef="Position">
            <mat-header-cell *matHeaderCellDef matTooltip="Position"> # </mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.Position }}</mat-cell>
        </ng-container>

        <!-- Concession Column -->
        <ng-container matColumnDef="nom">
            <mat-header-cell *matHeaderCellDef>Concession</mat-header-cell>
            <mat-cell class="mat-cell-concession" *matCellDef="let element">
                <ng-container *ngIf="element.Concession.Nom; else elseBlock">
                    {{ element.Concession.Nom }}
                    <ng-template #elseBlock>Content to render when condition is false.</ng-template>
                </ng-container>
            </mat-cell>
        </ng-container>

        <!-- Points Column -->
        <ng-container matColumnDef="Points">
            <mat-header-cell *matHeaderCellDef>points</mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.Points }}</mat-cell>

        </ng-container>

        <!-- Amount Column -->
        <ng-container matColumnDef="Montant">
            <mat-header-cell *matHeaderCellDef>Gain</mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.Montant | currency }}</mat-cell>

        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"></mat-row>
    </mat-table>
</div>

Thanks for your help

Solution

Here's my code that works now:

<div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary"
style="width: 450px;">
<div class="div-title">
    {{ this.annee }} - {{ this.getTypeInfo(this.typeList.TypeBourse) }}
</div>
<mat-table [dataSource]="bourseDetail" class="mat-elevation-z8">
    <!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 -->
    <!-- Position Column -->
    <ng-container matColumnDef="Position">
        <mat-header-cell class="mat-cell" *matHeaderCellDef matTooltip="Position"> Pos </mat-header-cell>
        <mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Position }}</mat-cell>
    </ng-container>

    <!-- Concession Column -->
    <ng-container matColumnDef="nom">
        <mat-header-cell class="mat-cell-concession" *matHeaderCellDef>Concession</mat-header-cell>
        <mat-cell class="mat-cell-concession mat-cell-column" *matCellDef="let element">
            <ng-container *ngIf="element.Concession.Nom">
                {{ element.Concession.Nom }}
                                                                                                
            </ng-container>
            <ng-container *ngIf="!element.Concession.Nom">
                Info manquante
            </ng-container>
        </mat-cell>
    </ng-container>

    <!-- Points Column -->
    <ng-container matColumnDef="Points">
        <mat-header-cell class="mat-cell" *matHeaderCellDef>points</mat-header-cell>
        <mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Points }}</mat-cell>

    </ng-container>

    <!-- Amount Column -->
    <ng-container matColumnDef="Montant">
        <mat-header-cell class="mat-cell" *matHeaderCellDef>Gain</mat-header-cell>
        <mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Montant | currency }}</mat-cell>

    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"></mat-row>
</mat-table>

And the CSS file: @import "./../../styles.scss";

    .mat-table {
      width: 100%;
    }

    .mat-row {
        width: 100%;
        min-height: 12px;
    }

    .div-title {
        text-align: center;
        font-size: medium;
        font-weight: bold;
        padding: 4px;
      }
      
    .mat-header-cell {
        min-height: 12px;
        font-size: smaller;
        font-weight: bold;
    }

    .mat-header-row {
      width: 100%;
      min-height: 10px;
      padding: 0px 0px 0px 4px;
    }
     
    .mat-cell-column {
        border-top: 1px solid crimson;
    }

    .mat-cell {
        flex: 0 0 50px !important;
        white-space: unset !important;
        justify-content: left;
        font-size: smaller;
        padding: 0px 0px 0px 4px;
        text-align: left;
    }

    .mat-cell-concession {
        flex: 0 0 250px !important;
        min-width: 250px !important;
        white-space: unset !important;
        justify-content: left;
        font-size: smaller;
        padding: 0px 0px 0px 4px;
        text-align: left;
        color: black;
    }

    .mat-row:nth-child(1n + 1) {
        background-color: mat-color($accent, lighter);
      }
      
      .mat-row:not(:nth-child(2n + 1)) {
        background-color: mat-color($primary, 300);
      }

    .example-element-row:hover {
      background: mat-color($accent, 800);
    }
    .example-element-row:active {
      background: #efefef;
    }