Olá Daniel, tudo bem?
A utilização de duas classes na mesma tag é uma prática comum em CSS. Isso acontece porque cada classe pode conter um conjunto diferente de propriedades, permitindo que você crie estilos mais complexos e específicos para seus elementos HTML.
No seu exemplo, a classe "principal" define a imagem de fundo e outras propriedades de estilo relacionadas ao fundo, enquanto a classe "container" define a altura da seção e outras propriedades de estilo relacionadas ao layout.
Quando duas classes são aplicadas a um mesmo elemento, o navegador aplica as propriedades de estilo de ambas as classes, mas a ordem em que as classes são definidas pode afetar o resultado final. No seu caso, a classe "container" é definida depois da classe "principal", o que significa que as propriedades da classe "container" sobrescrevem as propriedades da classe "principal" para a cor de fundo.
Para evitar que isso aconteça, você pode definir a cor de fundo diretamente na classe "principal" ou usar o seletor de classe mais específico para a cor de fundo, como .container.principal
.
Espero ter ajudado e bons estudos!