Huge margin created from UL element blocks out other divs

Question

I created a basic UL element that is set to display inline (basic navigation bar at the top of the website). I created another div for a search bar, which is set to float right of the UL element, but for some reason floats under the navigation div. Upon checking my elements, I noticed that the UL element has a margin that takes up all remaining space to the left and right of it, although I have not specifically assigned a margin to it. Am I missing something? I would be thankful for an answer to this problem, note that I am fairly new to web programming so excuse me if I missed something obvious!

#nav_bar{
  height: 3.5rem;
  border-top: 2px solid $theme_grey;
  border-bottom: 2px solid $theme_grey;
  background-color: $theme_dark_grey;
}

#nav_bar ul{
  color: #FFF;
  list-style-type: none;
  padding: 0.8rem 0;
  overflow: hidden;
  margin: 0px 0px;
  width: 50%;
}

#nav_bar li{
  font-size: 1.5rem;
  display: inline;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  height: 4rem;
  letter-spacing: 0.2rem;
}

#nav_bar img{
  vertical-align:middle;
}

#nav_bar a{
  text-decoration: none;
  color: white;
}

#nav_bar a:hover{
  text-decoration: underline;
  color: $link-color;
}

#nav_bar a span{
  margin-left: 1rem;
}

#nav_bar #search_engine
{
  width: 25%;
  margin: 0;
  float: right;
  height: auto;
}

#nav_bar #search_bar
{
  border: 0.2rem solid $theme_grey;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  padding: 0.4rem 0.5rem;
  outline: none;
}

#nav_bar #search_bar:hover{
  border: 0.2rem solid #6666FF;
}

#nav_bar #search_btn
{
  cursor: pointer;
}

<div id="nav_bar">
      <ul>
        <a href="#"><li><img src="images/icons8-Home-32.png" class="home_icon"></img><span>Home</span></li></a>
        <a href="#"><li><img src="images/icons8-Chevron Up-32.png" class="chevron_icon"><span>Popular</span></li></a>
        <a href="#"><li><img src="images/Path.png"><span>Trending</span></li></a>
        <li><img src="images/icons8-Detective-32.png"></li>
        <li></li>
      </ul>
      <!-- "search.php" page to display search results -->
      <div id="search_engine">
      <form action="search.php" method="post">
        <input type="text" id="search_bar" placeholder="Search..." value="" maxlength="25" autocomplete="off" onmousedown="" onblur="" />
        <input type="submit" id="search_btn" value="Go!" />
      </form>
      </div>
    </div>

Answer 1

Floating an element left or right causes the elements that follow, to wrap the floated element. Your search bar is not going settle beside your navigation because the search bar is placed after the navigation, not before. Try setting float:left to #nav_bar ul as shown. I took the liberty of changing the color of a from white.

#nav_bar{
  height: 3.5rem;
  border-top: 2px solid $theme_grey;
  border-bottom: 2px solid $theme_grey;
  background-color: $theme_dark_grey;
}

#nav_bar ul{
  color: #FFF;
  list-style-type: none;
  padding: 0.8rem 0;
  overflow: hidden;
  margin: 0px 0px;
  width: 50%;
  float:left;
}

#nav_bar li{
  font-size: 1.5rem;
  display: inline;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  height: 4rem;
  letter-spacing: 0.2rem;
}

#nav_bar img{
  vertical-align:middle;
}

#nav_bar a{
  text-decoration: none;
}

#nav_bar a:hover{
  text-decoration: underline;
  color: $link-color;
}

#nav_bar a span{
  margin-left: 1rem;
}

#nav_bar #search_engine
{
  width: 25%;
  margin: 0;
  float: right;
  height: auto;
}

#nav_bar #search_bar
{
  border: 0.2rem solid $theme_grey;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  padding: 0.4rem 0.5rem;
  outline: none;
}

#nav_bar #search_bar:hover{
  border: 0.2rem solid #6666FF;
}

#nav_bar #search_btn
{
  cursor: pointer;
}

<div id="nav_bar">
      <ul>
        <a href="#"><li><img src="images/icons8-Home-32.png" class="home_icon"></img><span>Home</span></li></a>
        <a href="#"><li><img src="images/icons8-Chevron Up-32.png" class="chevron_icon"><span>Popular</span></li></a>
        <a href="#"><li><img src="images/Path.png"><span>Trending</span></li></a>
        <li><img src="images/icons8-Detective-32.png"></li>
        <li></li>
      </ul>
      <!-- "search.php" page to display search results -->
      <div id="search_engine">
      <form action="search.php" method="post">
        <input type="text" id="search_bar" placeholder="Search..." value="" maxlength="25" autocomplete="off" onmousedown="" onblur="" />
        <input type="submit" id="search_btn" value="Go!" />
      </form>
      </div>
    </div>

You don't need float:right on the search element for this purpose.