Oii Filipe, tudo bem?

Uma solução comum para esse tipo de problema é o uso de media queries no CSS, que permitem ajustar estilos com base no tamanho da tela do dispositivo.

Você pode começar adicionando uma media query para telas menores. Por exemplo, você pode querer que, em telas menores que 768px (um tamanho comum), os itens do menu e os botões fiquem empilhados em vez de lado a lado, para evitar que saiam da tela.

Um exemplo:

/* Estilos para telas com largura máxima de 768px */
@media (max-width: 768px) {
    .navegacao {
        flex-direction: column;
        align-items: flex-start;
        padding: 1em;
    }

    .logo, .menu, .botoes {
        width: 100%;
        justify-content: center;
        margin-bottom: 1em; /* Adiciona um espaço entre os elementos */
    }

    .botoes {
        flex-direction: column;
    }

    .menu__item, .bt__entrar, .bt__cadastrar {
        display: block; /* Faz cada item ocupar a linha inteira */
        margin: 0.5em 0; /* Adiciona um espaço vertical entre os itens */
    }

    .bt__cadastrar {
        width: auto; /* Permite que o botão de cadastro expanda para preencher a largura disponível */
        text-align: center;
    }
}

Essas mudanças devem ajudar a tornar a navegação mais responsiva em telas menores. Você pode precisar ajustar as margens, o tamanho da fonte e outros detalhes para obter o que você deseja de fato. É mais uma luz pra você ;)

Um abraço e bons estudos.

Olá Lorena, tudo bem?

Muito obrigado pela resposta! Acredito que para o momento será a solução.

Você saberia me dizer como resolver isso SEM media queries?

Explicando: esse é um recurso mais recente e inclusive vi nos cursos de Mobile First, mas didaticamente gostaria de resolver isso sem o recurso, usando apenas as configurações das próprias tags e classes dos elementos. Queria entender por debaixo dos panos o que está causando esse "vazamento" de apenas alguns elementos.

Se puder me ajudar com isso, seria ótimo! E mais uma vez, obrigado pela resposta anterior!

Tudo certo por aqui (:

Sem o uso de media queries para ajustar o layout em diferentes tamanhos de tela, podemos tentar uma abordagem mais simplificada, só que menos flexível. Podemos tentar definir tamanhos relativos e proporcionais para os elementos da barra de navegação e dos botões.

Assim:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

:root {
  --cor-fundo: #ffffff;
  --cor-texto: #667085;
  --cor-texto-titulo: #101828;
  --cor-destaque: #8e2424;

  --fonte-primaria: "Inter", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  box-sizing: border-box;
  font-family: var(--fonte-primaria);
}

.navegacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 5%;
  font-weight: 500;
  font-size: 16px;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  color: #3a404e;
  gap: 10px;
  font-size: 18px;
  width: auto;
}

.botoes {
  display: flex;
  gap: 1em; /* Espaço entre os botões */
}

.menu {
  flex-grow: 1; /* Ocupa o espaço disponível */
  margin-left: 5%; /* Ajuste para espaçamento */
}

.menu__item {
  color: var(--cor-texto);
  margin-right: 1em;
}

.bt__entrar {
  padding: 0.8em 1.6em;
  border-radius: 8px;
}

.bt__cadastrar {
  padding: 0.8em 1.6em;
  border-radius: 8px;
  color: var(--cor-fundo);
  background-color: #8e2424;
}

.cabecalho {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2em 25%;
}

.cabecalho h1,
span {
  font-weight: 600;
  margin-bottom: 1em;
}

.cabecalho span {
  color: var(--cor-destaque);
}

.cabecalho h1 {
  font-size: 48px;
}

.cabecalho p {
  color: var(--cor-texto);
  font-weight: 400;
  font-size: 20px;
}

Essa versão remove as media queries e mantém os estilos básicos.

Mas é importante ressaltar que, embora tenhamos explorado uma abordagem alternativa sem o uso de media queries, a maneira mais comum e eficaz de lidar com a responsividade em CSS é através do uso de media queries. As media queries permitem aplicar estilos específicos com base nas características do dispositivo, como largura de tela, altura de tela, orientação e resolução, garantindo assim uma experiência de usuário consistente em diferentes dispositivos.

As media queries oferecem um alto nível de controle sobre o layout e o estilo da página em diferentes cenários, permitindo ajustar elementos conforme necessário para garantir uma aparência e funcionalidade adequadas em dispositivos móveis, tablets e desktops.

Então é importante utilizar.

Abraços.

Lorena, mais uma vez muito obrigado pela resposta!!

Eu quis entender a abordagem alternativa para entender de onde viemos no CSS, antes das media queries. Entender a História dessa evolução nos ajuda a dar valor a ferramenta. Evidentemente usarei as mesmas quando fizer os projetos daqui pra frente.

Abraços!