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

/* 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 >
      <div >
        <img  src="/img/logo.png" alt="logo" />
      </div>
      <div >
        <h1 >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 >
          <form  action="#">
            <input type="text" placeholder="Rechercher" />
          </form>
        </div>
      </ul>
    </nav>
  </header>

CodePudding user response：

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 >
    <div >
      <img  src="/img/logo.png" alt="logo" />
    </div>
    <div >
      <h1 >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 >
        <form  action="#">
          <input type="text" placeholder="Rechercher" />
        </form>
      </li>
    </ul>
  </nav>
</header>