Solucionado
Oi, eu gostaria de saber porque que quando se usa: .container { margin: 0 auto; max-width: 1200px; }
ao inspecionar a tag
no chrome é marcado apenas um pedaço da página (fundo azul claro)? Acredito que deveria marcar a pagina inteira. Ao fazer a mesma coisa no site do globo.com por exemplo, ao selecionar a tag , o navegador chrome marca a página inteira com a cor azul clara.Fico no aguardo.
Obrigado.
hoje, com a Alura e o Google Gemini
Olá Alexandre!
Dentro do elemento que tem a classe container, tem algum conteúdo?
Sim, tem a página inteira. Se você pegar o arquivo "curso-web-design-responsivo.zip" do curso de design responsivo vai entender melhor.
Certo, deixa eu ver se entendi...
Se os elementos dentro do <main class="destaques container"> estiverem com a propriedade float, o elemento container não terá altura, pois seus estes elementos filhos estão flutuando e não ocupam espaço dentro deste elemento.
Assim quando inspecionamos o elemento container o mesmo não vai ficar marcado de azul pois está sem altura.
Acredito que mais pra frente no curso, é explicado a propriedade clear que resolve esta situação.
O inspecionador de elementos sempre nos mostra exatamente como está elemento selecionado com as atuais propriedades de CSS, o que nos faz entender os diversos tipos de apresentação que as combinações de propriedades causam.
Bom se quiser fazer um teste com a propriedade clear basta adicionar no seu CSS algo como:
.container::after {
content: '';
display: block;
clear: both;
}Veja se isto ajuda!
Opa, funcionou perfeitamente! Eu tinha até colocado float na classe container, mas ai perdeu a centralização. Obrigado pela resposta.