Angular 角度扩展面板标题未与数据对齐

我有一个扩展面板，其中标题与单元格不对齐。我什么都试过了。这是我的html文件：

<div class="container-fluid">
      <mat-accordian displayMode="flat" multli class="mat-table">
      <section class="mat-header-row">
        <span class="mat-header-cell" class="col1">Sent to FIS</span>
        <span class="mat-header-cell" class="col2">FIS Report Name</span>
        <span class="mat-header-cell" class="col3">Azure File Name</span>
        <span class="mat-header-cell" class="col4">Number of Records</span>
      </section>
      <mat-expansion-panel *ngFor="let report of reportBatches">
        <mat-expansion-panel-header class="mat-row">
          <mat-panel-description class="mat-cell" class="col1">{{report.sentToXXX}} </mat-panel-description>
          <mat-panel-description class="mat-cell" class="col2">{{report.remoteFileNameOnFTA}} </mat-panel-description>
          <mat-panel-description class="mat-cell" class="col3">{{report.adlsFullPath.substring(report.adlsFullPath.indexOf('part'))}}</mat-panel-description>
          <mat-panel-description class="mat-cell" class="col4">{{report.numberOfRecords}}</mat-panel-description>
        </mat-expansion-panel-header>
        <mat-list>
          <mat-list-item><b>File Size : </b> {{report.contentLength}}</mat-list-item>
          <mat-list-item><b>Date Last Modified :</b> {{report.creationDate | date}}</mat-list-item>
          <mat-list-item><b>Data Path :</b> {{report.dataPath}}</mat-list-item>
          <mat-list-item><b>Batch Version :</b> {{report.version}}</mat-list-item>
          <mat-list-item><b>Batch Source :</b> {{report.source}}</mat-list-item>
        </mat-list>
        </mat-expansion-panel>
    </mat-accordian>
  </div>
</div>

---

我用过，所以很多css代码都是从那里来的。标题在那里正确对齐，但对我来说不是

你能用你的代码创建一个stackblitz吗。另外，添加一个屏幕截图也会有帮助。我会上传一张图片，如果还不够的话，我会在StackBlitz中上传。因为数据是保密的，所以我不能上传图片。我刚刚尝试了这个链接，我发现当页面完全打开时，标题会正确对齐，但是当它稍微小一点时，就像这里，它们不会正确对齐

col1 {
  width: 5%;
  padding: 5px 5px 10px 0px;
}

.col2 {
  width: 30%;
  padding: 5px 30px 10px 30px;
}

.col3 {
  width: 65%;
  padding: 5px 30px 10px 80px;
}

.col4 {
  width:10%;
  padding: 5px 0px 10px 30px;
}

.mat-accordion .mat-header-row {
  //padding-left: 1.5rem;
  //padding-right: 2rem;
  //border-bottom: none;
}

.mat-expansion-panel-header.mat-row {
  border-bottom: none;
  flex-basis: 0;
}

.mat-expansion-panel-header.mat-row {
  border-bottom: none;
  //flex-basis: 0;
}

//.mat-expansion-panel-header-description {
//  justify-content: space-between;
//  align-items: center;
//}

//copied from https://github.com/angular/material2/blob/master/src/lib/table/table.scss
$mat-header-row-height: 56px;
$mat-row-height: 48px;
$mat-row-horizontal-padding: 24px;

.mat-table {
  display: block;
}

.mat-header-row {
  min-height: $mat-header-row-height;
}

.mat-row {
  min-height: $mat-row-height;
}

.mat-row, .mat-header-row {
  display: flex;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  align-items: center;
  padding: 0 $mat-row-horizontal-padding;
  box-sizing: border-box;

  &::after {
    display: inline-block;
    min-height: inherit;
    content: '';
  }
}

.mat-cell, .mat-header-cell {
  flex: 1;
  overflow: hidden;
  word-wrap: break-word;

}

.mat-list-item {
  font-size: 14px;
  color: gray;
}