Fix html component and style sheet

src/app/comment-list/comment-list.component.html

-<mat-card *ngFor="let comment of comments">
-  <mat-card-header>
-    <mat-card-title>{{comment.subject}}</mat-card-title>
-    <mat-card-subtitle>
-      <span class="mat-caption">Submitted on {{ comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' }}</span>
-    </mat-card-subtitle>
-  </mat-card-header>
-  <mat-divider></mat-divider>
-  <mat-card-content>
-    <p>{{comment.body}}</p>
-  </mat-card-content>
-  <mat-divider></mat-divider>
-  <mat-card-actions *ngIf="userRole === userRoleTemp">
-    <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
-            (click)="setRead(comment)">
-      <mat-icon>speaker_notes</mat-icon>
-    </button>
-    <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
-            (click)="setRead(comment)">
-      <mat-icon>speaker_notes_off</mat-icon>
-    </button>
-    <button mat-icon-button color="warn" matTooltip="Delete comment"
-            (click)="delete(comment)">
-      <mat-icon>delete</mat-icon>
-    </button>
-  </mat-card-actions>
-  <mat-card-actions *ngIf="userRole !== userRoleTemp">
-    <mat-icon *ngIf="comment.read" color="primary" matTooltip="Comment was read">speaker_notes</mat-icon>
-    <mat-icon *ngIf="!comment.read" color="warn" matTooltip="Comment was not read">speaker_notes_off</mat-icon>
-  </mat-card-actions>
-</mat-card>
+<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
+  <div>
+    <mat-card *ngFor="let comment of comments">
+      <mat-card-header>
+        <mat-card-title>{{comment.subject}}</mat-card-title>
+        <mat-card-subtitle>
+          <span class="mat-caption">Submitted on {{ comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' }}</span>
+        </mat-card-subtitle>
+      </mat-card-header>
+      <mat-divider></mat-divider>
+      <mat-card-content>
+        <p>{{comment.body}}</p>
+      </mat-card-content>
+      <mat-divider></mat-divider>
+      <mat-card-actions *ngIf="userRole === userRoleTemp">
+        <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
+                (click)="setRead(comment)">
+          <mat-icon>speaker_notes</mat-icon>
+        </button>
+        <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
+                (click)="setRead(comment)">
+          <mat-icon>speaker_notes_off</mat-icon>
+        </button>
+        <button mat-icon-button color="warn" matTooltip="Delete comment"
+                (click)="delete(comment)">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </mat-card-actions>
+      <mat-card-actions *ngIf="userRole !== userRoleTemp">
+        <mat-icon *ngIf="comment.read" color="primary" matTooltip="Comment was read">speaker_notes</mat-icon>
+        <mat-icon *ngIf="!comment.read" color="warn" matTooltip="Comment was not read">speaker_notes_off</mat-icon>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+</div>

src/app/comment-list/comment-list.component.scss

 mat-card {
+  width: 800px;
+  max-width: 100%;
   margin: 10px;
 }
 

src/app/create-comment/create-comment.component.html

-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
   <div fxLayout="row" fxLayoutAlign="center">
     <form>
       <mat-form-field class="input-block">