角度4つのコンポーネントが水平

Question

enter image description here 充填されていないので、私は、水平方向に画面全体を埋めるために、画像やナビゲーションバーのテキストを望んでいたが、それを行うための方法を見つけることができません。私はCSSのプロパティの境界線のパディングと幅を使ってnavbar要素の背景を拡大しようとしましたが、何も変わっていないようです。要素は常に境界線の中央に置かれます。私は角にHTML/CSSからの私のコードを移行した後

にのみ発生します。これは私がコンポーネントに入れていないときに私のコードがどのように見えるかです：

誰もがこの問題を解決する方法を知っていますか？事前のおかげで

Components

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>