Угловой контент портит стиль начальной загрузки

Question

Я работаю над Angular 5 вместе с начальной загрузкой 4. Вот мой код:

app.component.html

 <app-home></app-home>

home.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

home.component.html

 <header id="home-section">
  <div class="dark-overlay">
      <div class="home-inner">
          <div class="container">
              <div class="row">
                  <div class="col-lg-8 d-none d-lg-block">
                      <p>HELLO</p>

                  </div>
                  <div class="col-lg-4">
                      <div class="card bg-primary text-center card-form">
                          <div class="card-body">
                              <h3>Sign Up Today</h3>
                              <p>Please fill out this form to register</p>
                              <form>
                                  <div class="form-group">
                                      <input type="text" class="form-control form-control-lg" placeholder="Username">
                                  </div>
                                  <div class="form-group">
                                      <input type="email" class="form-control form-control-lg" placeholder="Email">
                                  </div>
                                  <div class="form-group">
                                      <input type="password" class="form-control form-control-lg" placeholder="Password">
                                  </div>
                                  <div class="form-group">
                                      <input type="password" class="form-control form-control-lg" placeholder="Confirm Password">
                                  </div>
                                  <input type="submit" class="btn btn-outline-light btn-block">
                              </form>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</header>

Angular добавляет стиль следующим образом:

*[_ngcontent-c1] {
    margin: 0%;
}

Этот стиль мешает моему классу контейнера начальной загрузки, и в правой части страницы есть дополнительное место.Я прикреплю снимок здесь:

На изображении выше контейнер явно не посередине.

Вот скриншот, где я закомментировал этостиль в хроме проверяют.

Я не уверен, почему это происходит и как я могу это исправить.Я не могу закомментировать этот стиль ngcontent, поскольку он является частью самого angular.

Редактировать

Я присоединяю файл styles.scss компонента:

#home-section{
  // background: url('https://c1.staticflickr.com/3/2932/14143338033_20c1ce9c44_b.jpg') no-repeat;
  background-size:cover;
  background-attachment:fixed;
  min-height:700px;

  .dark-overlay{
    background-color:rgba(0,0,0,0.7);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:700px;
  }

  .home-inner{
    padding-top:150px;
  }

  .card-form{
    opacity:0.8;
  }

  .fa{
    color:#008ed6;
    background:#fff;
    padding:4px;
    border-radius:5px;
    font-size:30px;
  }
}