Dropdown menu pops below whole site instead of under button - css

Question

I'm developing a simple website using Angular 5 and Angular Materials. My site has one dropdown menu that is above whole content of my site, used to set sorting criteria. The problem is, when I try to open it, the menu opens itself all the way at the bottom of my site. What could be the cause of it?
Here is .html used for this site:
<mat-card >
<mat-card-header id="game-list-menu">
<div id="game-list-menu-left">
<button mat-button [matMenuTriggerFor]="sortMenu">Sort by: {{sortBy}}</button>
<mat-menu #sortMenu="matMenu">
<div id="game-list-menu-sort">
<button mat-menu-item (click)="changeSort(1)">Name</button>
<button mat-menu-item (click)="changeSort(2)">Platform</button>
<button mat-menu-item (click)="changeSort(3)">Rating</button>
</div>
</mat-menu>
</div>
<div id="game-list-menu-title">Game List</div>
<div id="game-list-menu-right">
<form #searchForm="ngForm" (ngSubmit)="search(searchForm.value)">
<mat-form-field>
<input matInput [(ngModel)]="searchGame.name"
required name="name" #name>
</mat-form-field>
<button mat-raised-button color="primary" type="submit"
[disabled]="!searchForm.form.valid">Search</button>
<button mat-raised-button color="primary" (click)="searchForm.reset(); showAll()">
<span>Show all</span>
</button>
</form>
</div>
</mat-card-header>
<mat-card-content id="game-list-container">
<mat-card class="game-list-item" *ngFor="let game of games">
<mat-card-header>
<mat-card-title>{{game.name}}</mat-card-title>
<mat-card-subtitle>{{game.platform}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="{{game.gameCoverPath}}" alt="{{game.name}} cover">
<mat-card-content>
<p>Rating:</p>
<span *ngFor="let goldstar of getIterator(game.rating)">
<img src="https://dl.dropbox.com/s/ngxkbxyy8hmpbaw/Star_gold.png?dl=0" height="20px" width="20px"/>
</span>
<span *ngFor="let greystar of getIterator(5 - game.rating)">
<img src="https://dl.dropbox.com/s/pnuorfnn75xib3o/Star_grey.png?dl=0" height="20px" width="20px"/>
</span>
<p></p>
</mat-card-content>
<mat-card-actions>
<button mat-button [routerLink]="['/game-details', game.id]">Details</button>
<button mat-button>Edit</button>
</mat-card-actions>
</mat-card>
</mat-card-content>
<mat-card-actions id="container_actions">
<button mat-fab color="primary" [routerLink]="['/game-add']">+</button>
</mat-card-actions>
</mat-card>
Here is CSS used for this site:
.game-list-item {
max-width: 300px;
padding: 25px;
margin: 10px;
display: inline-block;
}
#container_actions {
text-align: right;
padding: 25px;
}
.game-list-item mat-card-title {
font-size: 24px;
font-weight: bold;
}
.game-list-item mat-card-subtitle {
font-size: 18px;
}
.game-list-item mat-card-header {
display: inline;
}
.game-list-item .mat-card-content {
padding: 15px 0 0 0;
}
.game-list-item mat-card-actions {
text-align: right;
}
#game-list-menu {
}
#game-list-menu div {
display: inline;
padding: 20px;
width: 33%;
}
#game-list-menu-left {
text-align: left;
}
#game-list-menu-title {
}
#game-list-menu-right {
text-align: right;
}
#game-list-menu-sort {
}
Here is styles.scss file used for whole project:
#import url("https://fonts.googleapis.com/css?family=Karla");
* {
font-family: 'Karla', serif;
}
h1 {
width: auto;
text-align: center;
font-size: 50px;
}
mat-card-header {
width: auto;
text-align: center;
font-size: 35px;
}

Answer 1

Add this to your style.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';