Css 网格布局外的边距

我在网格布局中添加边距时遇到了一些问题。 无法将边距插入到占用整个视口的主体或.container。 当页面可滚动时。。。垂直滚动条还强制执行水平滚动条

.container {
    height:100vh;
    display: grid;
    grid-template-rows: auto 1fr  auto;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "header"
        "content"
        "footer"
    ;   
}

使用“框大小：边框框”

---

显示html代码也可以尝试框大小：边框框，这使得任何填充或边框都不会影响整体宽度。找到罪魁祸首。。。。我必须用window.onload初始化owlcarousel

.container {
    box-sizing: border-box;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "header"
        "content"
        "footer"
    ;
}