Solucionado
boa noite, observei o fórum e encontrei um problema similar ao meu, porém seguindo as etapas não consegui solucionar o problema. Não consigo deixar os ícones do container 2 alinhados a direita, nem tão pouco o espaçamento entre os itens do container 1. ambos estão diferente do da Mônica. Alguém poderia me orientar com algo? Desde já agradeço
Oi Juliano, tudo bem contigo?
Baseado nos códigos do seu GitHub eu pude perceber que os itens do segundo contêiner estão, sim, alinhados à direita!
Isso porque na tag header você usou Flexbox e colocou que os filhos dele deveriam estar separados por space-between, ou seja, eles devem ter espaço somente entre eles dois (os contêineres no caso). Portanto, eu não nada para comentar sobre isso.
O que percebi que poderia ser alterado para separar mais eles, seria diminuir o padding dos itens com a classe container__imagem, pois 1em realmente da a impressão de que eles não estão alinhados à direita. Então eu só recomendaria que você trocasse esse trecho de código:
.container__imagem {
padding: 1em;
}
Por esse outro aqui:
.container__imagem {
padding: 0.5em;
}
span.cabecalho__menu-hamburguer.container__imagem {
margin: 1rem;
}
Esse trecho de código CSS define estilos para duas classes diferentes: ".container__imagem" e "span.cabecalho__menu-hamburguer.container__imagem".
".container__imagem":
"span.cabecalho__menu-hamburguer.container__imagem":
<span> que tenham as classes "cabecalho__menu-hamburguer" e "container__imagem" simultaneamente.Em resumo, o código define o espaçamento interno de 0,5em para elementos com a classe "container__imagem" e a margem de 1rem para elementos <span> que possuam as classes "cabecalho__menu-hamburguer" e "container__imagem" juntas.
Eu recomendo essa substituição para que fique mais fácil de visualizar o espaçamento entre os contêineres, mas isso é opcional tá.
Em suma era isso, o seu código está ótimo e eu particularmente amei ele.
Continue se dedicando em seus estudos e caso tenha dúvidas, estarei à disposição para te ajudar!
Abraços e bons estudos.
Boa noite Renan, primeiro, muito obrigado pela ajuda foi exatamente o que eu pensei, porém como estou seguindo a aula esperava ter um resultado igual ao da Mônica. Agora só para fixar.
foi aplicado 1em a este trecho correto?
<span class="cabecalho__menu-hamburguer container__imagem"></span>
ficando assim no css
span.cabecalho__menu-hamburguer.container__imagem {
margin: 1rem;
}
é que não havia declarado desse jeito ainda, ai me confundi um pouco, mas pela análise que fiz direcionamos para o span com as classes cabecalho__menu-hamburguer e container__imagem, pois se colocássemos somente span, poderia afetar outros elementos span da página caso existissem, correto?
desde já agradeço
Oi Juliano, tudo bem?
Peço desculpas pela demora em obter um retorno!
Fico feliz em ter ajudado!
Sobre sua dúvida. Sim, você está correto em sua análise.
No trecho de código CSS, span.cabecalho__menu-hamburguer.container__imagem, está sendo aplicado um estilo específico para um elemento <span> que possui as classes cabecalho__menu-hamburguer e container__imagem ao mesmo tempo.
Essa abordagem é usada para selecionar de forma mais precisa o elemento desejado, evitando que o estilo seja aplicado a outros elementos <span> da página que não possuam essas classes específicas.
Ao utilizar a estrutura span.cabecalho__menu-hamburguer.container__imagem, estamos selecionando apenas o elemento <span> que possui essas duas classes em conjunto. Isso permite aplicar estilos específicos somente a esse elemento, sem afetar outros elementos <span> que possam existir na página.
Espero ter esclarecido sua dúvida.
Se você tiver mais perguntas, sinta-se à vontade para fazer.
Estou aqui para ajudar!
Abraços e bons estudos.
Muito obrigado Renan. Agora consegui compreender perfeitamente.