Problemas no layout dos componentes

Olá, pessoal!

Fui em outros tópicos, mas ainda não achei a solução para meu problema. A minha página de home/login está diferente. A formulário de login está aparecendo embaixo da foto do gato. Sem falar que os campos de input estão pequenos.

Já atualizei o projeto para bootstrap 4.6.0 e já importei as coisas no styles.css.

Alguém saberia me ajudar? agradeço desde já

home.component.html

<div class="container">
  <div class="row">
    <div class="col-md-6 mb-2">
      <img class="img-fluid d-none d-sm-block" src="assets/img/home.jpg" alt="Imagem de um gato para as boas vindas"/>
    <div>
    <div class="col-md-6">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

login.component.html:

<h4 class="text-center">Login</h4>

<form class="form mt-4">
  <div class="form-group">
    <input class="form-control" placeholder="Nome do usuário" />
  </div>

  <div class="form-group">
    <input type="password" class="form-control" placeholder="Senha">
  </div>

  <button type="submit" class="btn btn-primary btn-block">Login</button>
</form>