My searchbar wont move to the right side of my navbar-CodePudding

my searchbar wont move to the right of my navbar. This is my html code and my css. I found out that if I remove display: flex; in my CSS that the searchbar moves to the right but the rest of my buttons will get all weird. i dont know how to fix it.

body * {
  box-sizing: border-box;
}

header,
header nav {
  width: 100%;
}

header nav {
  position: fixed;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  box-shadow: 0 0 1rem 0 rgb(0, 0, 0, .5);
  z-index: 5;
}

header nav,
header nav ul,
header nav ul>li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

header nav ul {
  list-style-type: none;
}

header nav ul>li {
  position: relative;
}

header nav ul>li:hover ul {
  top: 100%
}

header nav ul li a,
header nav ul li a:visited {
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  color: #000;
  text-decoration: none;
}

header nav ul li a:hover {
  color: #76323f;
}

header nav ul>li>ul {
  position: absolute;
  top: -400%;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 0.5rem 0.3rem 0 rgb(0, 0, 0, 0.2);
  transition: top .5s ease;
  z-index: -1;
}

header nav ul>li>ul>li>a {
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  white-space: nowrap;
}


/* Dit is CSS voor mijn searchbar */

.search {
  float: right;
  padding: 1.2%;
  width: 23%;
  border: none;
  background-color: #eeeeee;
  margin-top: 0%;
  margin-right: -30%;
  font-size: 120%;
}

<header>
  <nav>
    <ul>
      <li><a href="index.html">Homepage</a></li>
      <li><a href="talen.html">Programmeer talen</a></li>
      <li><a href="vakken.html">Andere vakken</a>
        <ul>
          <li><a href="...">Databases</a></li>
          <li><a href="...">Versiebeheer</a></li>
          <li><a href="...">Netwerkbeheer</a></li>
        </ul>
      </li>
      <li><a href="aboutme.html">Over mij</a>
        <ul>
          <li><a href="...">About me</a></li>
          <li><a href="...">My goals and progress</a></li>
          <li><a href="...">My motivation</a></li>
        </ul>
      </li>
    </ul>
    <input class="search" type="text" id="searchBar" onkeyup="mySearchBar()" placeholder="Zoeken.." title="Type in a category">
  </nav>
</header>

CodePudding user response：

Is this what you need?

body * {
  box-sizing: border-box;
}

header,
header nav {
  width: 100%;
}

header nav {
  position: fixed;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  box-shadow: 0 0 1rem 0 rgb(0, 0, 0, .5);
  z-index: 5;
}

header nav,
header nav ul,
header nav ul>li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

header nav ul {
  list-style-type: none;
}

header nav ul>li {
  position: relative;
}

header nav ul>li:hover ul {
  top: 100%
}

header nav ul li a,
header nav ul li a:visited {
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  color: #000;
  text-decoration: none;
}

header nav ul li a:hover {
  color: #76323f;
}

header nav ul>li>ul {
  position: absolute;
  top: -400%;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 0.5rem 0.3rem 0 rgb(0, 0, 0, 0.2);
  transition: top .5s ease;
  z-index: -1;
}

header nav ul>li>ul>li>a {
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  white-space: nowrap;
}


/* Dit is CSS voor mijn searchbar */

.search {
  float: right;
  padding: 1.2%;
  width: 23%;
  border: none;
  background-color: #eeeeee;
  margin-top: 0%;
  font-size: 120%;
  margin-left: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="index.html">Homepage</a></li>
      <li><a href="talen.html">Programmeer talen</a></li>
      <li><a href="vakken.html">Andere vakken</a>
        <ul>
          <li><a href="...">Databases</a></li>
          <li><a href="...">Versiebeheer</a></li>
          <li><a href="...">Netwerkbeheer</a></li>
        </ul>
      </li>
      <li><a href="aboutme.html">Over mij</a>
        <ul>
          <li><a href="...">About me</a></li>
          <li><a href="...">My goals and progress</a></li>
          <li><a href="...">My motivation</a></li>
        </ul>
      </li>
    </ul>
    <input class="search" type="text" id="searchBar" onkeyup="mySearchBar()" placeholder="Zoeken.." title="Type in a category">
  </nav>
</header>

CodePudding user response：

So what i have done is, I removed your "align-items: flex-start". And in your .search css i have done some changes too. For me this css works fine:

.search {
  margin-left: auto;
  padding: 1.2%;
  width: 23%;
  border: none;
  background-color: #eeeeee;
  margin-top: 0%;
  font-size: 120%;
}