Angular 4组件未水平填充

Question

在这里输入图像描述，所以我希望图像和导航栏文本水平填满整个屏幕，但是找不到解决方法。 我使用CSS属性border padding和width尝试扩展navbar元素的背景，但似乎没有任何改变。 元素始终保持边界居中。

这仅在我将代码从HTML / CSS转换为Angular之后才会发生； 当我不将其放入组件时，这就是我的代码的样子：

有谁知道如何解决这一问题？ 提前致谢

组件

content_component.html <!-- Intro Header -->
<div class="all">
<header class="masthead">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <a href="#about" class="btn btn-circle js-scroll-trigger">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

  <!-- About Section -->
  <section id="about" class="content-section text-center">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2>About Me</h2>
          <p>
            hello
          </p>
        </div>
      </div>
    </div>
  </section>
</div>

content_component.css
    .all{
      height:100%;
      background: black;
      color: white;
      margin: 0;

    }

    .masthead{
      display: table;

      overflow:auto;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 100px;
      padding-bottom: 600px;

      text-align: center;

      color: white;
      background: url('../../img/intro-bg.jpg') no-repeat bottom center scroll;
      background-size: 100%;
      background-color: black;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      .intro-body {
        display: table-cell;

        vertical-align: middle;
        .brand-heading {
          font-size: 50px;
        }
        .intro-text {
          font-size: 18px;
        }
      }
      @media(min-width:768px) {
        height: 100%;
        padding: 0;
        .intro-body {
          .brand-heading {
            font-size: 100px;
          }
          .intro-text {
            font-size: 22px;
          }
        }
      }
    }

app_component.css
    .container{
    }
    html{
      margin:auto;
      overflow: hidden;
    }

Answer 1

您可以将页边距设置为自动https://jsfiddle.net/wxmsud1d/

body {
  margin:auto;
}
header {
  background-color:red;
}

<header>Text goes here</header>