How to move expanded table row in mat-table over to the right with css

Question

I have been following an example of adding expandable rows to an angular mat-table. So far, I have been successful - my code works mostly like the example. However, I am having a CSS issue. My expandable row is offset too far to the left, I am wondering how to shift it more to the right. Additionally, I would like to add rows to the expandable portion, instead of using mat-list. I have included an image of what I currently have and an image of what I would like to have. I am using Angular 9 and typescript for this project.

Example Link: https://www.freakyjolly.com/expand-collapse-single-or-multiple-rows-in-angular-98-material-table-multiple-single/

My question is, how can I shift the expandable table rows more to the right?

current table desired table

Notice in how the desired table, the list of extra rooms lines up with the column name (room info).

Below is my HTML file

<mat-card class="table">
<mat-card-header>
<mat-card-title> Home Information </mat-card-title>
</mat-card-header>

<mat-card-content>

<table mat-table [dataSource]="homeData" multiTemplateDataRows>

<ng-container matColumnDef="houseNumber">
   <th mat-header-cell *matHeaderCellDef> House Number> </th>
   <td mat-cell *matCellDef="let element"> {{element.homeNumber}} </td>
</ng-container>

<ng-container matColumnDef="houseStreet">
   <th mat-header-cell *matHeaderCellDef> House Street> </th>
   <td mat-cell *matCellDef="let element"> {{element.homeStreet}} </td>
</ng-container>

<ng-container matColumnDef="roomInfo">
   <th mat-header-cell *matHeaderCellDef> Room Info> </th>
   <td mat-cell *matCellDef="let element"> 
      <span *ngIf="element.extraRooms; else noMoreRooms">
      <a mat-button href="javascript:void(0)" click()="element.isExpanded =! element.isExpanded">Peek></a>
      </span>
      <ng-template #noMoreRooms> </ng-template>
   </td>
</ng-container>

    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="listOfExtraRooms.length">

        <div class="row student-element-detail" [@detailExpand]="element.isExpanded ? 'expanded' : 'collapsed'">
          <mat-list>
            <mat-list-item *ngFor="let list of listOfExtraRooms">
            <span *ngIf="element.houseNumber === list.houseNumber">
             <tr>
               <span> {{list.roomName}} </span>
             </tr>
            </mat-list-item>
          </mat-list>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="student-element-row" [class.student-expanded-row]="element.isExpanded"></tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="student-detail-row"></tr>

</table>
</mat-card-content>

Below is my CSS file

.mat-list-item {
  font-size: 16px;
}

.student-element-detail {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e1e1e1;
  box-shadow: inset 2px 3px 8px #c1c1c1;
  border-radius: 8px;
}

.student-element-row td {
  border-bottom-width: 0;
}

td.mat-cell {
  min-height: 30px;
  padding: 5px;
}

th.mat-header-cell {
  padding: 5px;
}

table {
  width: 100%;
}

.margin {
  margin-right: 20px;
}

Below is my typescript (ts) file

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource } from '@angular/material/table';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class AppComponent {


  houseJSON = [
   {
     "homeNumber": "1827",
     "homeStreet": "Paris_Road",
     "extraRooms": true
   }
   ];

  listOfExtraRooms = [
   {
     "homeNumber": "1827",
     "roomName": "kitchen",
     "isExpanded": false,
   },
   {
     "homeNumber": "1827",
     "roomName": "bathroom",
     "isExpanded": false,
   }
  ];


  dataHouseList = new MatTableDataSource();
  displayedColumns = string[] = ['houseNumber', 'houseStreet',  'roomInfo'];

  ngOnInit() {
   this.dataHouseList.data = this.houseJSON;
  }
}