[Dúvida] .cabecalho não centralizou com o justify-self

temos esse html aonde demos a classe de cabecalho para o header

...trecho omitido

<header class="cabecalho container">
        <a href="#"><img class="cabecalho__logo" src="./src/imagens/Logos/CastWave_logo.svg" alt="Logo da WaveCast"></a>
        <button class="cabecalho__botao"><img src="./src/imagens/Icones/seta-voltar.svg" alt="Seta voltar"></button>
        <button class="cabecalho__botao cabecalho__botao__avancar"><img src="./src/imagens/Icones/seta-avancar.svg" alt="Seta avançar"></button>
    </header>
...trecho omitido

no index.css nós definimos o 'body' (elemento pai do 'header') como grid, tornando assim o '.cabecalho' um grid item

...trecho omitido

body {
    display: grid;
    grid-template-areas:
    "aside header"
    "aside main";
    grid-template-columns: auto 1fr;
}

.cabecalho {
    grid-area: header;
}

.menu-lateral {
    grid-area: aside;
}

.principal {
    grid-area: main;
}

...trecho omitido

e no mediaQuery nós definimos que o '.cabecalho' deveria ser centralizado usando a a propriedade 'justify-self: center'

...trecho omitido

@media only screen and (max-width: 1023px) {
    .menu-lateral,
    .rodape,
    .cabecalho__botao,
    .secao-horizontal .cartao__subtitulo,
    .secao-horizontal .cartao__botao,
    .secao-horizontal .cartao__player,
    .secao-vertical .secao__link {
        display: none;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar {
        display: block;
    }   

    .cabecalho {
        justify-self: center;
    }
    .secao-horizontal .cartao__imagem {
        height: 4.58rem;
    }
 
    .secao-horizontal .cartao__titulo {
        font: 700 14px/20px Open Sans, sans-serif;
    }

    .secao-vertical .cartao {
        background-color: transparent;
        padding: 0;
    }

}

...trecho omitido

Porém o cabecalho não está centralizando, não acontece nada.