如何删除我的html页面两侧的白色边距

我正在学习网页设计，我正在使用flex为我的网站创建响应性布局。出于某种原因，我的container div在左侧和右侧都创建了一种白色边距，我不知道如何删除它，因此内容占据了100%的宽度。下面是一个js提琴来说明它

HTML

---

如果向容器中添加一个额外的

无填充类

，则可以添加：-

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

而不会影响您站点上的任何其他容器

请参阅下面的完整示例

html，正文{
身高：100%；
宽度：100%；
}
.集装箱{
最小高度：100%；
最小宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
1.没有填充物{
左侧填充：0！重要；
右边填充：0！重要；
}
梅因先生{
柔性生长：1；
显示器：flex；
柔性流动：柱状nowrap；
证明内容：中心；
对齐项目：居中；
}
.navigation.main.footer{
弹性收缩：0；
}
.页脚{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：14vh；
背景色：黑色；
不透明度：0.9；
颜色：白色；
}
.导航{
显示器：flex；
证明内容：柔性端；
背景色：黑色；
不透明度：0.9；
填充：0.7em；
颜色：白色；
}

废话

您正在使用bootstrap，因此请依赖bootstrap类（）

.footer{
高度：14vh；
背景色：黑色；
不透明度：0.9；
颜色：白色；
}
.导航{
背景色：黑色；
不透明度：0.9；
填充：0.7em；
颜色：白色；
}

废话

html, body {
    height: 100%;
    width: 100%;
}

.container {
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.main {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

.navigation .main .footer {
    flex-shrink: 0;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14vh;
    background-color: black;
    opacity: 0.9;
    color: white;
}

.navigation {
    display: flex;
    justify-content: flex-end;
    background-color: black;
    opacity: 0.9;
    padding: 0.7em;
    color: white;
}

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}