Não consigo alinhar os itens conforme mostra no final do vídeo da aula 3, fiz a atribuição pra aba de flexbox.css com e nada. Como resolvo?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Não consigo alinhar os itens conforme mostra no final do vídeo da aula 3, fiz a atribuição pra aba de flexbox.css com e nada. Como resolvo?
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/estilos.css">
<title>AluraPlay</title>
<link rel="stylesheet" href="./css/flexbox.css">
<link rel= "shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Cabecalho -->
<header>
<nav class= "cabecalho__container">
<h1 class= "logo__item" href="#"></h1>
<div class= "cabecalho__pesquisar__item">
<form action="">
<input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input">
<label for="pesquisar" class="pesquisar__label"></label>
</form>
<a href="#" class="cabecalho__audio"></a>
</div>
<div class="cabecalho__icones__item">
<a href="#" class="cabecalho__videos"></a>
<a href="#" class="cabecalho__apps"></a>
<a href="#" class="cabecalho__notificacoes"></a>
<a href="#" class="cabecalho__avatar"></a>
</div>
</nav>
</header>
Olá, João! Como vai?
Sinto muito pelo seu problema. Para que eu possa te ajudar melhor, poderia compartilhar aqui o seu código completo, incluindo HTML e CSS, e especificar qual elemento exatamente você não está conseguindo alinhar?
Caso tenha o código em algum repositório, é melhor ainda que compartilhe o link do repositório.
Fico à disposição. Abraço!
São os itens do cabecalho__container, inclusive eu apliquei na aba do flexbox.css a estilização:
.cabecalho__container {
display: flex;
}
mas não deu certo, os itens continuam no centro.
Olá, João! Como vai?
Para corrigir o espaçamento, você deve adicionar o mesmo código utilizado pelo instrutor no seu código. Veja:
.cabecalho__container {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
Você pode conferir o código completo do curso aqui!
Espero ter ajudado. Fico à disposição!
Abraço!