Angular 9，在组件中占据全宽

Question

我在获取我的一个角度模板文件中的内容以占据页面的整个宽度和高度时遇到问题。基本上我得到以下信息：

但我想要这样的东西： 我尝试将我的主 div 放在 template.html 中，宽度为：100%；但我没有任何区别。也许这与其他组件的样式有关。我不知道如何解决这个问题，任何帮助都会得到帮助！

这是显示的屏幕截图，这是导航栏和内容的 html、css。

header.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand">Brand</a>
    </div>
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active"><a routerLink="/link1" id="identified">Link 1</a></li>
        <li routerLinkActive="active"><a routerLink="/link2" id="identified">Link 2</a></li>
      </ul>
    </div>
  </div>
</nav>

header.css

.navbar-default {
  background-color: #7cd8fc;
}

.navbar-brand {
  color: white;
}
.navbar-brand:hover {
  color: white;
  background-color: #777799;
}
.navbar-brand:active {
  color: white;
}
#identified {
  color: black;
}
#identified:hover {
  background-color: #cadbda;
  /* background-color: #777799; */
}

* {
  font-family: Cambria; 
}

内容.html

<div class="container" style="width:100%;">
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
  text<br>
</div>

内容.css

(empty)

app.component.html

<app-header></app-header>
  <div class="container">
    <div class="row">
       <div class="col-md-12">
            <router-outlet></router-outlet>
        </div>
      </div>
  </div>

app.component.css

(empty)

违规展示：

Answer 1

改变

<div class="container">

到

<div class="container-fluid">

引导容器类具有左右边距。使用流体容器创建一个没有边距的容器。

供参考https://getbootstrap.com/docs/4.0/layout/overview/#containers