Comportamento diferente do mostrado no vídeo

.cabecalhoPrincipal-nav {
  flex-direction: column;
}
.cabecalhoPrincipal .container{
  direction:column;  
  align-items: initial;
  text-align: center;
}

Estes códigos tiram o align-items dos icones da barra de navegação, fazendo que a barra ocupe 100% da largura da tela em dispositivos mobile, o problema é que comigo não aconteceu isso.

Atualmente, meu código está apenas com flex-direction: column nas duas classes. Quando eu retiro o align-items do .cabecalhoPrincipal .container como está no código acima, o titulo é jogado para a esquerda.

E quando eu tiro a align-items da classe .cabecalhoPrincipal-nav, ela não ocupa o espaço todo, a margin do bottom aumenta um pouco, e o texto é jogado para a esquerda.

A solução que encontrei para isso foi a seguinte:

.cabecalhoPrincipal-nav {
  flex-direction: column;
  align-items: initial;
  width: 100%;
  text-align: center;
}
.cabecalhoPrincipal .container {
  flex-direction: column;
}

Gostaria de saber se a decisão está satisfatória, ou se ela possui alguma mal prática ou poderia causar algum bug na versão mobile.