Why is the div wider than its content? - html

Question

I'm trying to create a page with a 20-60-20 flex fill layout but the div in the center which should make up 60% of the page is wider than its content so it makes its content look like it is off-center.
home.component.html:
<div fxLayout="row wrap" fxLayoutGap="20px grid">
<div *ngFor="let data of DUMMY_DATA">
<mat-card class="example-card" >
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content class="description-max-height">
<p>
{{data.description.length > 100 ? data.description.substring(0, 100) + '...' : data.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
home.component.css:
.example-card {
width: 250px;
height: 300px;
}
.description-max-height {
max-height: 30px;
}
app.component.html:
<mat-toolbar color="primary" style="margin-bottom: 20px">
<mat-toolbar-row>
<span>Some title</span>
<span class="toolbar-spacer"></span>
<button mat-button color="accent" (click)="openLoginDialog()">Log In</button>
<button mat-button color="accent" (click)="openSignupDialog()">Register</button>
</mat-toolbar-row>
</mat-toolbar>
<div fxLayout="row">
<div fxFlex="20"></div>
<router-outlet fxFlex="60"></router-outlet>
<div fxFlex="20"></div>
</div>
app.compoenent.css:
.toolbar-spacer {
flex: 1 1 auto;
}
How can I implement this so that will display the home.component.html on the center of the page without it being wider than it's contet?
You can find a Stackblitz example here

Answer 1

The router-outlet isn't a container. All the content routed to a router-outlet is rendered as a sibling node, not as an outlet's child node. So you should wrap the router-outlet with a 60%-width div.
Stackblitz demo
<div fxLayout="row">
<div fxFlex="20"></div>
<div fxFlex="60">
<router-outlet></router-outlet>
</div>
<div fxFlex="20"></div>
</div>

Answer 2

Adding fxLayoutAlign="centre" to the fxLayout div(top level div) in home-component.html should align the items/cards in centre in the container.
<div fxLayout="row wrap" fxLayoutGap="20px grid" fxLayoutAlign="center">