Olá!
Estou tendo problemas com o espaçamento dos ícones.
Já conferi os códigos e estão exatamente iguais aos da instrutora.
Baixeis os arquivos diretamente pelo Figma, conforme sugestão de um usuário nas perguntas anteriores, e também tentei seguir com as imagens salvas na pasta disponibilizada no início do curso.
Porém, em ambos os casos, sem sucesso.
Alguém poderia me ajudar?
Sigo no aguardo! Obrigada. =)
Segue solução que encontrei:
.cabeçalho {
background-color: var(--branco);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.container {
display: flex;
align-items: center;
}
.container__imagem {
margin: 1em 0;
}
#img__profile {
padding-right: 1em;
}
#img__menu {
padding-left: 3.5em;
}
#img__logo {
padding: 0 0.5em;
}
Passo 01: baixar as imagens diretamente do Figma.
Passo 02: definir uma margem de 1em para cima e para baixo na classe .container__imagem.
Passo 03: Criar uma ID para os ícones da lateral (menu e profile) + logo.
Passo 04: Ajustar o padding do menu, profile e logo, através do ID, conforme mencionado acima.
--
Antes estava assim:
No Figma está assim:
O resultado após essa solução (conforme descrito acima), ficou assim:
Por último, quando abrimos a página no navegador, finalmente a divisão aparece de maneira correta:
Não sei se existe uma regra ou se essa solução é válida, mas foi a única forma que encontrei para solucionar esse problema.
=)
Essa seria a maneira que eu resolveria isso, talvez funcionasse aí também
<style>
header{
height: 84px;
width: 100%;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
}
.menu{
width: 100px;
display: flex;
justify-content: space-evenly;
}
.nav{
width: 200px;
display: flex;
justify-content: space-evenly;
}
</style>
<body>
<header>
<nav>
<div class="menu">
<a href="">icone de menu</a>
<a href="">imagem</a>
</div>
<div class="nav">
<a href="">favoritos</a>
<a href="">sacola</a>
<a href="">perfil</a>
</div>
</nav>
</header>
</body>Obrigada pela ajuda, Allex.