Solucionado
Na aula, o instrutor apresentou possiveis solucoes para ajustar o header. Ao utilizar display: inline-block como solucao, foi visto que seria dificil alinhar o .cabecalhoPrincipal-nav utilizando margin-left com um "numero magico". Entretanto, nao seria possivel utilizar margin-left: auto para o browser calcular o espaco disponivel a esquerda do elemento e preencher este?
Tiago tudo bem?
O valor auto na propriedade não saberia calcular a distancia para empurrar o elemento para a direita, ele apenas ia manter no canto esquerdo.
Nesse caso não funcionaria como o margin: 0 auto; Que acaba calculando as margens conforme o tamanho fixo do elemento e centralizando na tela.
Para conseguir o alinhamento no canto direito sem usar a propriedade flex e com o display: inline-block Seria necessário saber o valor exato da distancia, sendo assim um jeito possível para conseguir esse valor sem saber a distancia, é usar o margin-left com valor em porcentagem de 100% menos o tamanho do elemento em questão, ficando dessa forma a propriedade:
margin-left: calc(100% - 300px);
Claro que esse valor subtraindo eu coloquei como exemplo.
Tem um jeito usando text-align também mas não seria nada recomendado E o melhor jeito sem se preocupar em fazer esses cálculos é usando o display flex com as propriedade de justify e alinhamento.
Espero ter ajudado, se souber outras maneiras compartilha ai :)
Certo, Lucas. Mas, porque o auto não funciona neste caso? Quais as implicações e condições pra este valor funcionar numa propriedade CSS?
Tiago, o valor auto ele tem reações em contextos diferentes e conforme a propriedade que esta sendo usado.
Um exemplo com margin que você citou ele vai apenas deixar automático a dimensão daquela propriedade.
Não vai preenche necessariamente, pois vai depender também do contexto.
Por exemplo em outra propriedade como o overflow: auto; Ao invés de definir se vai ter scroll ou não, dependendo do contexto com a propriedade auto ele define se mostra ou não ao invés de forçar que sempre apareça ou que nunca apareça.
Com a propriedade height de altura por exemplo ao invés de fixar um valor em px ou então em % ou qualquer outra medida possível, o valor auto deixa automático essa dimensão da altura para o contexto do objeto com a propriedade height.
Resumindo um pouco, sobre o valor auto.
Alguns links de discussões legal para ler:
https://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property
https://www.w3.org/TR/css-values-4/
http://unmatchedstyle.com/news/a-to-z-css-auto.php
Espero ter ajudado com sua dúvida, indico fazer pesquisas sobre o assunto de box-model e também sobre os valores e medidas que existe no css.
Bons estudos
Obrigado!