Html 引导容器不是全宽的（屏幕左右两侧的空白）？

我已经在我的网页上为导航栏写了一些标记，现在我正试图转到下一个部分，我注意到当我添加另一个部分时，它没有扩展整个宽度：

我在那个部分添加了一个白色背景，身体的背景是黑色的。以下是一些标记和CSS：

HTML示例：

<header>
    <div class="container">
        <!-- fun markup here -->
    </div>  
</header>
<section id="work">
    <div class="container"></div>
</section>

---

我相信我漏掉了所有不相关的信息，但是如果我漏掉了一些您也需要的重要信息，请告诉我。

这里的简单答案是使用

容器流体

请检查这把小提琴：

如您所见，第一个
容器
类（简单地说就是
容器
）在较大的视口中设置了1170px的宽度，在稍小的视口中设置了970px的宽度，依此类推（它随着视口大小的减小而减小）

第二个示例，
容器流体
，设置为其父流体的100%宽度。这意味着如果
标题
元素没有定义宽度，则
容器流体
类将延伸到窗口的整个宽度

或者，如果
标题
元素的宽度为900px（第三个示例），则直接将
容器流体
作为其子元素放置将使
容器流体
元素的宽度为900px。注意，您可能需要展开小提琴的视口才能看到它的作用。
尝试添加容器流体而不是容器流体。如果仍然不起作用，则创建小提琴/plnkr。这对我们来说很容易理解。请提供您的代码（HTML/CSS/JS）的一个最小工作示例，该示例再现了问题中描述的问题。见和。
section#work {
    padding: 100px 0;
    background-color: white;
}