如何在使用CSS网格时使标头跨越页面的整个宽度？

Question

我正在尝试使标头跨越页面的整个宽度（顶部和侧面无间隙），但是我的标头位于CSS网格内，因此我很难做到这一点。

我希望标题保留在页面顶部，这是我将其保留在网格中的部分原因。当我将其取出并固定好位置后，由于它已从流量中取出，因此下面的东西最终藏在了它的后面。至少当我将其放在网格中并使用以下位置时：粘性；它不会弄乱流程。

是否有一种方法可以使页眉跨越页面的整个宽度而不会使其脱离网格？

header{
    position: sticky;
    top: 0;

    grid-column: 1 / -1;
    grid-row: 1;

    display: grid;
    grid-template-columns: 1fr, auto;
    grid-gap: 10px;

    background-color: #000;
    color: #fff;
    padding: 20px;
}

#logo{
    grid-column: 1;
    grid-row: 1;
    width: 30%;
}

nav{
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}