Olá Raynara! Tudo bem?
Por favor, compartilhe o código do seu projeto conforme as orientações do guia de como fazer uma boa pergunta no fórum para que a gente consiga te auxiliar de forma mais precisa.
Aguardo seu retorno. Um abraço!
<header>
<nav class="cabecalho__container">
<div class="logo__item">
<img src="img/VidFlow--Logo-light-mode.png" alt="logo do vidflow">
</div>
<div class="cabecalho__pesquisar__item">
<form class="form__pesquisa"></form>
<input type="search" class="pesquisar__input" placeholder="pesquisar">
<img src="img/topbar/keyboard.png" alt="icone de teclado" class="pesquisar__input-teclado">
<button class="pesquisar__btn">
<img src="img/topbar/search.png" alt="icone de lupa">
</button>
<button class="cabecalho__audio">
<img src="img/topbar/Mic.png" alt="icone de microfone">
</button>
</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>
<label class="cabecalho__switch">
<input type="checkbox" class="cabecalho__switch-input">
<span class="cabecalho__switch-slider"></span>
</label>
</div>
</nav>
</header>
Olá!
Consegue enviar o CSS também? Como ele é responsável pelo estilo, deve ser nele que precisaremos alterar para tirar esse desalinhamento.
flexbox.css
/* CABEÇALHO */
.cabecalho__container {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
.cabecalho__pesquisar__item {
display: none;
}
.form__pesquisa {
position: relative;
flex: 1;
display: flex;
justify-content: center;
}
/* SECAO SUPERIOR */
.superior__slider {
display: none;
}
estilos.css
/* CABEÇALHO */
.cabecalho__container {
background-color: var(--branco);
height: 80px;
width: 100%;
padding: 0 25px;
}
.logo__item {
padding: 15px 0px;
cursor: pointer;
}
.pesquisar__input {
padding: 8px;
border: 2px solid var(--cinza-claro);
border-radius: 32px 0px 0px 32px;
font-size: 16px;
}
.pesquisar__input-teclado{
position: absolute;
right: 16%;
top: 30%;
}
.pesquisar__btn {
background-color: var(--cinza-claro);
border: 0px;
border-radius: 0px 32px 32px 0px;
padding: 8px;
padding-right: 15px;
border-left: none;
cursor: pointer;
}
.cabecalho__audio {
border: 0px;
background-color: var(--branco);
}
.cabecalho__videos {
background-image: url(../img/topbar/video_call.png);
background-repeat: no-repeat;
background-position: center;
padding: 20px;
}
.cabecalho__apps {
background-image: url(../img/topbar/apps.png);
background-repeat: no-repeat;
background-position: center;
padding: 13px 30px 13px 13px;
}
.cabecalho__notificacoes {
background-image: url(../img/topbar/notifications.png);
background-repeat: no-repeat;
background-position: center;
padding: 13px 30px 13px 13px;
}
.cabecalho__avatar {
background-image: url(../img/topbar/Avatar.png);
background-repeat: no-repeat;
background-position: center;
padding: 13px 30px 13px 33px;
}
.cabecalho__switch {
position: relative;
display: inline-block;
padding: 13px 30px 13px 13px;
width: 60px;
height: 34px;
}
.cabecalho__switch-input{
opacity: 0;
width: 0;
height: 0;
}
.cabecalho__switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--cinza-claro);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.cabecalho__switch-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: var(--branco);
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
.cabecalho__switch-input:checked + .cabecalho__switch-slider {
background-color: var(--azul-destaque-light);
}
.cabecalho__switch-input:focus + .cabecalho__switch-slider {
box-shadow: 0 0 1px var(--cinza-claro);
}
.cabecalho__switch-input:checked + .cabecalho__switch-slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}