Por que deu certo?

Oii Ernesto! Tudo bem?

E

O código que você escreveu está relacionado à estilização de um menu para tablets. Vamos analisar cada parte dele:

.menu__container {
    left: 0;
    height: auto;
    width: 74px;
    top: 80px;
}

Nesse trecho, você está definindo que o container do menu deve estar posicionado no lado esquerdo (left: 0) da tela e 80px distante do topo (top: 80px). A largura (width: 74px) é fixa em 74px, como solicitado no desafio, e a altura (height: auto) se ajusta automaticamente de acordo com o conteúdo dentro do container.

.menu__lista {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 15px;
    gap: 33px;
}

Aqui, você está usando Flexbox para alinhar os itens do menu. flex-direction: column faz com que os itens se alinhem verticalmente, justify-content: flex-start faz com que eles comecem a partir do topo do container e gap: 33px adiciona um espaço de 33px entre cada item. O padding-top: 15px adiciona um espaço de 15px entre o topo do container e o primeiro item do menu.

Então, o "fundamento" que faz com que o menu apareça ao lado esquerdo é a combinação do left: 0 no .menu__container (que posiciona o container no lado esquerdo da tela) e o flex-direction: column no .menu__lista (que alinha os itens do menu verticalmente).

Espero ter ajudado e bons estudos!

Muito obrigado Sarah!