Putting the Search Bar in the NavBar

I'm a beginner when it comes to html and css, I have to make a website as a school project. I want to add the search bar in the navbar using css, I'v been searching but I couldn't find the answer. Here's my code:

jQuery(function($) {
  $('#search-trigger').click(function() {
    $('#search-input').toggleClass('search-input-open');
  });
  $(document).click(function(e) {
    if (!$(e.target).closest('.ngen-search-form').length) {
      $('#search-input').removeClass('search-input-open');
    }
  })
});

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 18px;
  background-image: url("Background5.gif");
  background-size: 1366px 800px;
  background-repeat: no-repeat;
}
#header img {
  max-width: 100%;
  height: 100%;
}
#nav {
  background-color: #222;
}
#nav_wrapper {
  width: 960 px;
  margin: 0 auto;
  text-align: left;
}
#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}
#nav ul li {
  display: inline-block;
}
#nav ul li:hover {
  background-color: #333;
}
#nav ul li a,
visited {
  color: #ccc;
  display: block;
  padding: 15px;
  text-decoration: none;
}
#nav ul li a:hover {
  color: #ccc;
  text-decoration: none;
}
#nav ul li:hover ul {
  display: block;
}
#nav ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul li {
  display: block;
}
#nav ul ul li a,
visited {
  color: #ccc;
}
#nav ul li li a:hover {
  color: #099;
}
#nav ul ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul ul li {
  display: block;
}
#nav ul ul ul li a,
visited {
  color: #ccc;
}
#nav ul ul li li a:hover {
  color: #099;
}
#nav ul ul ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul ul ul li {
  display: block;
}
#nav ul ul ul ul li a,
visited {
  color: #ccc;
}
#nav ul ul ul li li a:hover {
  color: #099;
}
#nav ul ul ul ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul ul ul ul li {
  display: block;
}
#nav ul ul ul ul ul li a,
visited {
  color: #ccc;
}
#nav ul ul ul ul li li a:hover {
  color: #099;
}
.form {
  padding: 0px 0px 0px 0px;
  float: right;
}
.form-search-input {
  width: 0px;
  height: 55px;
  border: 0;
  outline: 0;
  font-size: 21px;
  padding: 0px 0px 0px 0px;
  color: #151515;
  transition: all 0.5s;
}
.search-input-open {
  width: 410px !important;
  padding: 0px 0px 0px 20px !important;
  display: initial !important;
}
.form-search-submit {
  display: inline-block;
  width: 55px;
  height: 43px;
  border: 0;
  outline: 0;
  background-color: #151515;
  font-size: 21px;
  color: #FFF;
  cursor: pointer;
  text-align: center;
}

<div id="maincontainer">
  <div id="header">
    <img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
  </div>
  <div id="nav">
    <div id="nav wrapper"></div>
    <ul>
      <li><a class="active" href="#">Home</a>
      </li>
      <li>
        <a href="#">Story</a>
        <ul>
          <li><a href="#">Child of Prophecy</a>
          </li>
          <li>
            <a href="#">The Wild Hunt</a>
          </li>
          <li>
            <a href="#">Romance</a>
          </li>
          <li>
            <a href="#">Choice & Consequence</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Regions</a>
        <ul>
          <li><a href="#">White Orchard</a>
          </li>
          <li>
            <a href="#">Velen-No Man's Land</a>
          </li>
          <li>
            <a href="#">Novigrad</a>
          </li>
          <li>
            <a href="#">Royal Palace in Vizima</a>
          </li>
          <li>
            <a href="#">The Skellige Isles</a>
          </li>
          <li>
            <a href="#">Kaer Morhen</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Bestiary</a>
        <ul>
          <li><a href="#">Beasts</a>
          </li>
          <li>
            <a href="#">Cursed Ones</a>
          </li>
          <li>
            <a href="#">Draconians</a>
          </li>
          <li>
            <a href="#">Elementals</a>
          </li>
          <li>
            <a href="#">Hybrids</a>
          </li>
          <li>
            <a href="#">Insectoids</a>
          </li>
          <li>
            <a href="#">Necrophages</a>
          </li>
          <li>
            <a href="#">Ogroids</a>
          </li>
          <li>
            <a href="#">Relicts</a>
          </li>
          <li>
            <a href="#">Specters</a>
          </li>
          <li>
            <a href="#">Vampires</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Monster Hunts</a>
      </li>
      <li>
        <a href="#">DLC's</a>
        <ul>
          <li><a href="#">Heaarts of Stone</a>
          </li>
          <li>
            <a href="#">Blood and Wine</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">CD Projekt Red</a>
      </li>
    </ul>
    <div>
      <div class="form">
        <form class="form-search ngen-search-form" action="" method="get">
          <input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
          <span id="search-trigger" class="form-search-submit">&#x1f50e;</span>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solution

Try this:

jQuery(function($) {
  $('#search-trigger').click(function() {
    $('#search-input').toggleClass('search-input-open');
  });
  $(document).click(function(e) {
    if (!$(e.target).closest('.ngen-search-form').length) {
      $('#search-input').removeClass('search-input-open');
    }
  })
});

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 18px;
  background-image: url("Background5.gif");
  background-size: 1366px 800px;
  background-repeat: no-repeat;
}
#header img {
  max-width: 100%;
  height: 100%;
}
#nav {
  background-color: #222;
}
#nav_wrapper {
  width: 960 px;
  margin: 0 auto;
  text-align: left;
}
#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}
#nav ul li {
  display: inline-block;
}
#nav ul li:hover {
  background-color: #333;
}
#nav ul li a,
visited {
  color: #ccc;
  display: block;
  padding: 15px;
  text-decoration: none;
}
#nav ul li a:hover {
  color: #ccc;
  text-decoration: none;
}
#nav ul li:hover ul {
  display: block;
}
#nav ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul li {
  display: block;
}
#nav ul ul li a,
visited {
  color: #ccc;
}
#nav ul li li a:hover {
  color: #099;
}
#nav ul ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul ul li {
  display: block;
}
#nav ul ul ul li a,
visited {
  color: #ccc;
}
#nav ul ul li li a:hover {
  color: #099;
}
#nav ul ul ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul ul ul li {
  display: block;
}
#nav ul ul ul ul li a,
visited {
  color: #ccc;
}
#nav ul ul ul li li a:hover {
  color: #099;
}
#nav ul ul ul ul ul {
  display: none;
  position: absolute;
  background-color: #333;
  border: 2px solid #222;
  border-top: 0;
  margin-left: -2px;
}
#nav ul ul ul ul ul li {
  display: block;
}
#nav ul ul ul ul ul li a,
visited {
  color: #ccc;
}
#nav ul ul ul ul li li a:hover {
  color: #099;
}
.form {
  padding: 0px 0px 0px 0px;
  float: right;
}
.form-search-input {
  width: 0px;
  height: 55px;
  border: 0;
  outline: 0;
  font-size: 21px;
  padding: 0px 0px 0px 0px;
  color: #151515;
  transition: all 0.5s;
}
.search-input-open {
  width: 410px !important;
  padding: 0px 0px 0px 20px !important;
  display: initial !important;
}
.form-search-submit {
  display: inline-block;
  width: 55px;
  height: 43px;
  border: 0;
  outline: 0;
  background-color: #151515;
  font-size: 21px;
  color: #FFF;
  cursor: pointer;
  text-align: center;
}

<div id="maincontainer">
  <div id="header">
    <img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
  </div>
  <div id="nav">
    <div id="nav wrapper"></div>
    <ul>
      <li><a class="active" href="#">Home</a>
      </li>
      <li>
        <a href="#">Story</a>
        <ul>
          <li><a href="#">Child of Prophecy</a>
          </li>
          <li>
            <a href="#">The Wild Hunt</a>
          </li>
          <li>
            <a href="#">Romance</a>
          </li>
          <li>
            <a href="#">Choice & Consequence</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Regions</a>
        <ul>
          <li><a href="#">White Orchard</a>
          </li>
          <li>
            <a href="#">Velen-No Man's Land</a>
          </li>
          <li>
            <a href="#">Novigrad</a>
          </li>
          <li>
            <a href="#">Royal Palace in Vizima</a>
          </li>
          <li>
            <a href="#">The Skellige Isles</a>
          </li>
          <li>
            <a href="#">Kaer Morhen</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Bestiary</a>
        <ul>
          <li><a href="#">Beasts</a>
          </li>
          <li>
            <a href="#">Cursed Ones</a>
          </li>
          <li>
            <a href="#">Draconians</a>
          </li>
          <li>
            <a href="#">Elementals</a>
          </li>
          <li>
            <a href="#">Hybrids</a>
          </li>
          <li>
            <a href="#">Insectoids</a>
          </li>
          <li>
            <a href="#">Necrophages</a>
          </li>
          <li>
            <a href="#">Ogroids</a>
          </li>
          <li>
            <a href="#">Relicts</a>
          </li>
          <li>
            <a href="#">Specters</a>
          </li>
          <li>
            <a href="#">Vampires</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Monster Hunts</a>
      </li>
      <li>
        <a href="#">DLC's</a>
        <ul>
          <li><a href="#">Heaarts of Stone</a>
          </li>
          <li>
            <a href="#">Blood and Wine</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">CD Projekt Red</a>
      </li>
      <li>
        <div class="form">
          <form class="form-search ngen-search-form" action="" method="get">
            <input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
            <span id="search-trigger" class="form-search-submit">&#x1f50e;</span>
          </form>
        </div>
      </li>
    </ul>
    <div>

    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>