[Bug] Categorias sai do local

Olá, Margarida! Tudo bom com você?

Eu dei uma olhada no seu código, e só foi preciso fazer uma pequena alteração no seu HTML e no CSS, na parte do header. O código ficou dessa forma aqui:

HTML:

<header class="cabecalho">
        <div class="container">
            <input type="checkbox" name="Menu" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Front-End</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Design & UX</a>
                </li>

            </ul>
            <img src="/assets/Logo.svg" alt="Logo da Alura Books" class="container__imagem">
            <hi class="container__titulo"><b class="container__titulo--negrito"> Alura</b> Books</hi>
        </div>
        <ul class="opcoes">
            <input type="checkbox" name="opcoes-menu" id="opcoes-menu" class="opcoes__botao">
            <label for="opcoes-menu">
            <li class="opcoes__item">Categorias</li>
            </label>
            <!--lista menu hamburguer-->
            <ul class="lista-menu">
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Front-End</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Design & UX</a>
                </li>
                <!--lista menu hamburguer fim-->
            </ul>
            <li class="opcoes__item"><a href="#" class="opcoes__link">Favoritos</a></li>
            <li class="opcoes__item"><a href="#" class="opcoes__link">Minha Estante</a></li>
        </ul>
        <div class="container">
            <a href="#"><img src="/assets/Favoritos.svg" alt="Meus Favoritos" class="container__imagem container__imagem__favoritos"></a>
            <a href="#"><img src="/assets/Sacola.svg" alt="Carrinho de Compras" class="container__imagem"></a>
            <a href="#"><img src="/assets/Usuario.svg" alt="Meu Perfil" class="container__imagem"></a>
        </div>
    </header>

CSS:

@media screen and (min-width: 1024px) {

    .container__titulo, .container__titulo--negrito {
        font-size: 30px;
        font-family: var(--fonte-secundaria);
    }

    .container__titulo {
        display: block;
        margin-top: 0.5em;
        font-weight: 400;
    }

    .container__titulo--negrito {
        font-weight: 700;
    }

    .opcoes {
        display: flex;
        align-items: center;
    }

    .opcoes__item {
        padding: 0 1em;
        text-transform: uppercase;

    }

    .opcoes__link {
        text-decoration: none;
        color: var(--preto);
    }

    .container__imagem__favoritos {
        display: none;
    }

    .cabecalho__menu-hamburguer {
        display: none;
    }

    .opcoes__botao:checked~.lista-menu {
        display: block;
        width: auto;
    }
    .opcoes__botao {
        display: none;
    }
}

No HTML, eu só mudei a identação e hierarquia de alguns elementos, dessa forma o 'justify-content: space-between' do cabeçalho seria aplicado, e no CSS, eu coloquei um 'align-items: center' na classe '.opcoes' para centralizar o elemento.

Espero ter ajudado, Margarida, e nesse caso, eu agradeceria bastante se marcasse minha resposta como solução para sua dúvida! Bons estudos e um grande abraço!

Obrigado Iury, ajudou imenso!