I am having trouble centering my login Component in the red zone on the page. It seems that my html and body tags are not taking up all the available space on the page. If you want to view my project, you can find it on my GitHub at https://github.com/SIGX-SENPAI/Angular-VRChat
LoginComponent.html
<form class="dropdown p-5 justify-content-center bg-danger">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debbb3bfb7b29ebba6bfb3aeb2bbf0bdb1b3">[email protected]</a>">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
AppComponent.html
<app-navbar *ngIf="login" (showNav)="login = $event" (showOut)="local = $event"></app-navbar>
<div class="container" *ngIf="!local">
<router-outlet></router-outlet>
</div>
<div *ngIf="local">
<div class="pt-2 pb-2">
<app-promo></app-promo>
</div>
<div class="container">
<app-home></app-home>
</div>
<app-features></app-features>
<app-footer></app-footer>
</div>
enter image description here enter image description here
The blue shadow represents the html body.