Solucionado
Boa noite, o lado direito da margem de pesquisa vai ate fim da página. eu não estou conseguindo achar onde está o erro. Alguém me ajuda favor. e já testei no firefox , pensando que era bug do chrome, mas infelizmente no firefox também acontece o mesmo.
}
Olá boa noite!
Como está as declarações css da classe .banner?
O padding que está declarado pode estar errado(se você está fazendo igual da aula). Tente dessa forma:
.banner {
background: var(--azul-degrade);
color: var(--branco);
text-align: center;
padding: 2.5em 2em;
}Se não resolver mande seu código css e html, alguns detalhes podem passar...
Espero ter ajudado!
Boa noite!
.banner{
background: var(--azul-degrade);
color: var(--branco);
text-align: center;
padding: 2.5em 2em;
}Sim, de banner está igual da aula
Como está a parte HTML referente ao banner?
Se puder mande o seu código CSS completo do banner.css também.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Alura Books</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.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=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="cabecalho">
<div class="container">
<input type="checkbox" id="menu" class="container__botao">
<label for="menu">
<span class="cabecalho__menu-hamburguer container__image"></span>
<img src="assets/Logo.svg" alt="Logo da Alurabooks" class="container__image">
</label>
<ul class="lista-menu">
<li class="lista-menu__titulo">Categoria</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Programação</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Front-end</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Infraestrutura</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Business</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Design & UX</a></li>
</ul>
</div>
<div>
<a href="#"> <img src="assets/Favoritos.svg" alt="Meus Favoritos" class="container__image"></a>
<a href="#"> <img src="assets/Compras.svg" alt="Carrinhos de Compras" class="container__image"></a>
<a href="#"> <img src="assets/Usuario.svg" alt="Meu Perfil" class="container__image"></a>
</div>
</header>
<section class="banner">
<h2 class="banner_titulo">Já sabe por onde começar?</h2>
<p class="banner_texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
<input type="serch" class="banner_pesquisa" placeholder="Qual será sua próxima leitura?">
</section>
</body>
</html>.banner{
background: var(--azul-degrade);
color: var(--branco);
text-align: center;
padding: 2.5em 2em;
}
.banner_titulo{
font-size: 18px;
font-weight: 700;
}
.banner_texto{
font-weight: 500;
margin: 1em 0;
}
.banner_pesquisa{
background-color: transparent;
border: 1px solid var(--branco);
color: var(--branco);
border-radius: 24px;
padding: 1em;
width: 100%;
}
.banner_pesquisa::placeholder{
font-family: var(--fonte-principal);
font-size: 14px;
font-weight: 400;
text-align: center;
color: var(--branco);
background: url("../assets/lupa.svg") no-repeat;
background-position: 1em;
}Olá bom dia!
Após muitos teste aqui achei um pequeno erro no seu código que depois que corriji resolveu no meu usando seu código.
Na linha no input no HTML, você escreveu o type do input errado(serch) o correto e search. Tente corrijindo lá.
<input type="search" <-----AQUI ESTAVA O ERRO class="banner_pesquisa" placeholder="Qual será sua próxima leitura?">Não entendi muito bem o que isso muda no posicionamento, vou até dar uma pesquisada aqui. Mas tenta ai e se persistir o problema mande aqui novamente.
Obrigado Luiz!! Como mudava posicionamento do lado esquerdo achei que erro estava em css. nem pensei em checar input.