Material Design mat-card aligning horizontally instead of centrally

[brianademba]

I am creating mat-cards on Apigee integrated developer portal. Instead of having the cards centrally placed, they are aligning  horizontally. I have copied sample codes for  cards on /index page but i dont endup with the same card alignment.

Card on /index page

Code

<div class="home-page" >
<div class="home-page-cta">
<h1 class="home-page-cta-title">
Launch your APIs
</h1>
<h2 class="home-page-cta-subtitle">
With Apigee API Portals
</h2>
<a mat-raised-button
id="home-page-cta-get-started"
href="quickstart">
Quick Start
</a>
</div>
<div class="home-page-cards">
<mat-card class="home-page-card quick-start">
<mat-card-header class="home-page-card-header"
color="primary">
<mat-icon class="home-page-card-header-icon">
check_circle
</mat-icon>
<h2 class="home-page-card-header-text">
<a class="navigable-content" href="get-started">
Get Started
</a>
</h2>
</mat-card-header>
<mat-card-content class="home-page-card-content">
<a class="navigable-content" href="get-started">
<p class="home-page-card-content-text">
Launch your API program using Apigee portals in no time flat!
</p>
</a>
</mat-card-content>
</mat-card>
<mat-card class="home-page-card view-apis">
<mat-card-header class="home-page-card-header"
color="primary">
<mat-icon class="home-page-card-header-icon">
class
</mat-icon>
<h2 class="home-page-card-header-text">
<a class="navigable-content" href="apis">
APIs
</a>
</h2>
</mat-card-header>
<mat-card-content class="home-page-card-content">
<a class="navigable-content" href="apis">
<p class="home-page-card-content-text">
Learn about and try our APIs.
</p>
</a>
</mat-card-content>
</mat-card>
</div>
</div>

Card I created on a separate page

Code for card I created

<div class="home-page-cards">
<mat-card class="home-page-card quick-start">
<mat-card-header class="home-page-card-header"
color="primary">
<mat-icon class="home-page-card-header-icon">
check_circle
</mat-icon>
<h2 class="home-page-card-header-text">
<a class="navigable-content" href="get-started">
Get Started
</a>
</h2>
</mat-card-header>
<mat-card-content class="home-page-card-content">
<a class="navigable-content" href="get-started">
<p class="home-page-card-content-text">
Launch your API program using Apigee portals in no time flat!
</p>
</a>
</mat-card-content>
</mat-card>


<mat-card class="home-page-card view-apis">
<mat-card-header class="home-page-card-header" color="primary">
<mat-icon class="home-page-card-header-icon">
class
</mat-icon>
<h2 class="home-page-card-header-text">
<a class="navigable-content" href="apis">
APIs
</a>
</h2>
</mat-card-header>
<mat-card-content class="home-page-card-content">
<a class="navigable-content" href="apis">
<p class="home-page-card-content-text">
Learn about and try our APIs.
</p>
</a>
</mat-card-content>
</mat-card>
</div>