Entrar Ainda não tem acesso?
2
respostas

[Dúvida] cabeçalho nao esta ficando igual

Referente ao curso CSS: explorando seletores e utilizando variáveis, no capítulo Hierarquia de estilos e atividade Criando o cabeçalho

por Aline Alonso
| 23.8k xp | 10 posts

ja revizei todo meu codigo, mas não encontro onde esta o erro q esta limitando o cabeçalho

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

css

.cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2rem;
}

.alinhamento-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
}

.label-busca {
    display: flex;
    flex-grow: 0.5;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #444444;
    padding: 8px 16px;
    border-radius: 2rem;
}

.label-busca input {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Sigmar&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./estilos.css">
  <title>Petpark</title>
</head>

<body>
  <header class="cabecalho">
    <div class="alinhamento-cabecalho container">
      <img src="./assets/logo.png" alt="Logotipo do Petpark" />
      <label class="label-busca" for="campo-busca">
        <input class="input-busca" type="text" name="campo-busca" placeholder="O que você procura?" />
        <div class="icone-busca">
          <div></div>
        </div>
      </label>
      <button class="botao-login">
        <img class="icone-login" src="./assets/icones/login.png" alt="ícone de login" />
        Login/Cadastro
      </button>
    </div>
2 respostas
por Victor Costa Santos
| 2259.6k xp | 4493 posts
Alura Scuba Team

Olá, Aline!

Acredito que você precisa ajustar duas coisas no seu código para o cabeçalho funcionar corretamente:

Adicionar a classe container: Inclua a classe container na div que possui a classe alinhamento-cabecalho no seu HTML.

Verificar o arquivo estilos.css: Garanta que o arquivo estilos.css está sendo carregado corretamente e que ele contém estilos para a classe container (como width, max-width e margin: 0 auto;).

O código pode ficar assim: HTML:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Sigmar&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./estilos.css">
    <link rel="stylesheet" href="./css/cabecalho.css">
    <title>Petpark</title>
</head>

<body>
    <header class="cabecalho">
        <div class="alinhamento-cabecalho container">
            <img src="./assets/logo.png" alt="Logotipo do Petpark" />
            <label class="label-busca" for="campo-busca">
                <input class="input-busca" type="text" name="campo-busca" placeholder="O que você procura?" />
                <div class="icone-busca">
                    <div></div>
                </div>
            </label>
            <button class="botao-login">
                <img class="icone-login" src="./assets/icones/login.png" alt="ícone de login" />
                Login/Cadastro
            </button>
        </div>
        <!-- Código omitido... -->
    </header>
</body>

</html>

CSS completo para teste:

/* estilos.css */

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
   
}

.cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2rem;
}

.alinhamento-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
}

.label-busca {
    display: flex;
    flex-grow: 0.5;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #444444;
    padding: 8px 16px;
    border-radius: 2rem;
}

.label-busca input {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

Se o erro persistir, por favor manda o seu código completo para mim, o erro principal pode está no arquivo estilos.css Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade
por Aline Alonso
| 23.8k xp | 10 posts

Obrigada por responder Victor, achei o erro aqui e consegui corrigir. O container estava dentro da classe body no estilos.css