Need help achieving the desired result using only flexbox and grid layout.
The goal is to place a search bar vertically centered and to the right of the navbar, while keeping the existing items on the left intact. Can you assist?
/* Reset */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/* General styles */
html {
font-size: 100%;
line-height: 1.5;
}
body {
max-width: 1850px;
font-family: "BenchNine", sans-serif;
}
/* Header */
.top-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
align-items: center;
}
.slogan {
text-align: right;
font-family: "Chela One", cursive;
font-size: 4em;
color: #527bea;
}
/* Navbar */
nav {
background-color: #ae2123;
}
ul {
display: flex;
justify-content: left;
}
a {
display: block;
padding: 15px 25px;
text-align: center;
color: #fff;
}
a:hover {
color: #999;
}
input {
padding: 5px 20px;
border-radius: 20px;
}<header>
<div class="top-container">
<div class="logo-box">
<img class="logo" src="/img/logo.png" alt="logo" />
</div>
<div class="slogan-box">
<h1 class="slogan">La passion des films</h1>
</div>
</div>
<nav>
<ul>
<li>
<a href="#">Programmes</a>
</li>
<li>
<a href="#">Actualités</a>
</li>
<li>
<a href="#">Jeune Public</a>
</li>
<li>
<a href="#">Tarifs</a>
</li>
<li>
<a href="#">Accés</a>
</li>
<div class="form-container">
<form class="form" action="#">
<input type="text" placeholder="Rechercher" />
</form>
</div>
</ul>
</nav>
</header>