title: Unknown space in angular component
body: <p>I've just started learning Angular 6. 
  I created a simple Angular app in which I created a header-component.</p>
  
  <p><strong>header.component.html</strong></p>
  
  <pre><code>&lt;header class="head"&gt;
    &lt;div class="header-background"&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  </code></pre>
  
  <p><strong>header.component.css</strong></p>
  
  <pre><code>* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  
  .head {
      height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid green;
  }
  
  .header-background {
      background-color: rgba(128, 128, 128, 0.09);
      height: 80%;
      width: 90%;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>When I run ng serve I see a white spacing at the top, left and right I'm not sure what it is. I have double checked <code>padding</code> and <code>margin</code> is <strong>0px</strong>.</p>
  
  <p>I'm adding a screenshot <a href="https://i.stack.imgur.com/DjeEu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DjeEu.png" alt="screenshot"></a>.</p>
  
  <p><strong>Here you can see that there is white space at the top, left and right outside my <code>.head</code>'s border</strong>. I have also added bootstrap@3.7.7 in my project file.</p>
  
  <p>Pls provide the solution and also state the reason why I'm facing this problem.</p>
  
  <p>This is the space I'm talking about.</p>
  
  <p><a href="https://i.stack.imgur.com/Tz8BE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Tz8BE.png" alt="enter image description here"></a></p>