Выравнивание для Seachbar в заголовке ⇐ Html

[Anonymous]

Введите описание изображения здесь < /p>
Выше вы можете увидеть мою проблему. У меня есть Trubble, делая это так, чтобы поисковая строка оставалась в заголовке. Что мне делать? Введите код здесь
enter code here
/* Header Search Styles */
.search-container-header {
background-color: var(--light-green) !important;
max-width: 30vw;
margin-top: 1rem;
border: 2px solid rgba(255, 255, 255, 0);
border-radius: 28px;
height: 6vh;
padding: 0.5rem;
box-sizing: border-box;
margin: 0;
}
.search-wrapper-header{
display: flex; /*not doing anything ((*/
}

.input-search-header {
font-size: 1rem;
width: calc(100% - 2.8rem);
background-color: var(--light-green) !important;
border: 2px solid transparent;
border-radius: 5px;
outline: none;
height: 2rem;
color: var(--dark-green);
}
/* When the search bar is visible */
.search-wrapper-header.active .search-container-header {
display: block; /* Make it visible when active */
}
/* code from other doc */
header {
background-color: var(--red);
height: 5rem;
position: relative; /* Allow absolute positioning of inner elements */
z-index: 10;
}

nav a {
color: var(--off-white);
text-decoration: none;
}

.nav-space {
display: flex;
justify-content: space-between;
}

nav ul {
display: flex;
list-style: none;
justify-content: flex-end;
}

/*html added for searsh bar in js:*/

enter code here








Подробнее здесь: https://stackoverflow.com/questions/795 ... the-header