Css 如何将mat卡包含在另一个mat卡中。输出不对齐

我想能够包括在垫子网格瓷砖测试卡。测试卡应该包含一个油炸圈饼图，它是mat选项卡将显示的任何计算结果。我的问题是图表（测试卡）不对齐。我是UI开发新手，所以请耐心听我说

html示例

<mat-card class="sample-title">Test</mat-card>
    <mat-grid-list cols="4" rowHeight="280px">
      <mat-grid-tile colspan="3">
        <mat-card class = "card-class">
        <mat-tab-group>
          <mat-tab label="First">
            <mat-card>Content 1 </mat-card>
          </mat-tab>
          <mat-tab label="Second">
            <mat-card>Content 2</mat-card>
          </mat-tab>
          <mat-tab label="Third">
            <mat-card>Content 3</mat-card>
          </mat-tab>
          </mat-tab-group>
        </mat-card>
        <mat-card class="test-card">Test</mat-card>
      </mat-grid-tile>
    </mat-grid-list>

.sample-title {
  background-color: #ffffff;
  font-family: "GT-Walsheim-Pro-Bold";
  font-size: 16px;
  color: black;
  border-top: 3px solid #175fab;
  border-radius: 0px;
  width: 700px;
  height: 15px;
  margin-left: 30px;
  margin-top: 30px;
  right: 0;
}

.card-class {
  background-color: #ffffff;
  font-family: "GT-Walsheim-Pro-Bold";
  font-size: 16px;
  color: black;
  border-radius: 0px;
  width: 1500px;
  /* max-height: 400px; */
  margin-left: 30px;
  margin-top: -120px;
  overflow: auto;
  right: 0;
}

---

您应该知道，将一张卡放在另一张卡中是违反材料设计“规则”的。提升的项目不应包含提升的项目。卡片是一种相当特定的用户体验模式，而不是通用的布局或样式容器。它通常不会有选项卡容器或其他复杂控件。谢谢。我将注意到这一点。我不是一个真正的UI/UX用户，所以我想我必须研究更多关于材料设计的“规则”。