When rendering an application in Angular 6 the layout is breaking

Question

I did a job with Angular 6 in a company and I didn’t touch it anymore. I went back to study to actually learn and started with a project I picked up on the internet here. Well, I followed the tutorial completely and when I run the application, the layout breaks, getting like this:

Should be like this

I looked at the code and it seems to be correct, and I don’t know if I ate any "cap" in it. See the HTML:

<div class="wrapper-header">
    <div class="row">
        <div class="col-xs-12 col-md-8">
          <ul class="menu-header">
            <li>Abra sua conta</li>
            <li>Investimentos</li>
            <li>Planos</li>
          </ul>
      </div>
      <div class="col-xs-12 col-md-4">
        <form>
          <div class="form-row align-items-center">
            <div class="col-auto my-1">
              <div class="form-check">
                <label class="form-check-label" for="autoSizingCheck2">
                <b>Acesse</b> sua conta
                </label>
                <input type="text" class="form-control" id="inlineFormInputName" placeholder="Digite seu CPF">
              </div>
            </div>
            <div class="col-auto my-1">
              <button type="submit" class="btn btn-primary acessar-conta">Acessar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

This is my CSS copied from the Project Author

.wrapper-header  {
        height: 30vh;
        padding: 30px;
        background: #dcbc81;
        color: #fff;
        box-shadow: 0 2px 5px -2px grey;
    }

    .menu-header li  {
        display: block;
        font-size: 16px;
        margin-left: -24px;
        padding: 0px;
    }
    .acessar-conta {
        position: relative;
        top: 10px;
        background-color: #fff;
        border: 0;
        color: #333;
    }

    @media screen and (min-width: 600px) {
            .wrapper-header {
                height: 15vh;
            }
            .menu-header li {
            list-style: none;
            display: inline;
            position: relative;
            margin: 10px;
            top: 30px;
            font-size: 18px;
        }
    }

and the project header Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

What’s wrong I can’t see?