Angular 4 Composants non remplis horizontalement

Question

enter image description here Je voulais donc que l'image et le texte de la barre de navigation remplissent tout l'écran horizontalement, mais ne trouvent pas le moyen de le faire. J'ai utilisé le remplissage et la largeur des bordures des propriétés CSS pour essayer d'agrandir les éléments de la barre de navigation, mais rien ne semble le changer; les éléments restent toujours centrés avec des bordures. Cela ne se produit qu'après la transition de mon code HTML/CSS vers Angular; Voici à quoi ressemble mon code quand je ne le mets pas dans les composants:

Est-ce que quelqu'un sait comment résoudre ce problème? merci à l'avance

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

Vous pouvez définir la marge de corps à auto https://jsfiddle.net/wxmsud1d/

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

<header>Text goes here</header>