Как сделать так, чтобы мат-разделитель простирался до самого конца

Question

У меня есть диалоговое окно с мат-разделителем под текстом заголовка. Мне нужно, чтобы разделитель матов был полностью вытянут с обоих концов и касался границ диалогового окна матов горизонтально.

Вот мой шаблон диалогового окна матов html:

<h2 mat-dialog-title>This is a Dialog title</h2>
<mat-divider></mat-divider>
<mat-dialog-content>

<p> Place content here </p>
{{data}}
</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button" (click)="close()">Close</button>
</mat-dialog-actions>

Вот компонент стиля s css:

.mat-divider mat-divider-horizontal {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: red;
 }