How to place element in a navbar using flexbox and grid layout | HTML and CSS only

Question

I'm having an issue to get the result I want.

I can only use flexbox and grid layout to do this.

I'm currently trying to place a search bar inside of the navigation bar.

I would like it verticaly centered and placed to the right of the navbar.

The items

and must remain where they are on the left.

Can you please help me?

 /* 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>

Answer 1

Your HTML is invalid. You cannot have a div as a direct child to a ul . Make it just another li instead.

Then you can add align-items: center; to the ul which will center it vertically. Then add margin-left: auto; to place it on the right.

 /* 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; align-items: center; }.form-container { margin-left: auto; margin-right: 1em; } 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> <li class="form-container"> <form class="form" action="#"> <input type="text" placeholder="Rechercher" /> </form> </li> </ul> </nav> </header>