Space Between Navbar and the Content

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.img-logo img {
  max-width: 100px;
}

.img-logo {
  margin-right: auto;
}

.container {
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}

.header {
  height: 112px;
  width: 100%;
  background: #fff;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.navBar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.navBar-wrapper div {
  font-size: 16px;
  line-height: 24px;
  color: #323232;
  margin-top: 28px;
}

.home {
  font-weight: 700 !important;
  color: #F78434 !important;
}

<header class="header">

  <div class="container">
    <nav class="navBar">

      <div class="navBar-wrapper">
        <div class="img-logo">
          <img src="https://4m4you.com/wp-content/uploads/2020/06/logo-placeholder.png" alt="" srcset=""></div>


        <div class="home">Home</div>
        <div class="aboutUs">About us</div>
        <div class="findSpace">Find space</div>
        <div class="share-space">Share space</div>
        <div class="promoteSpace">Promote space</div>

      </div>

    </nav>
  </div>

</header>

Decreasing space in-between navbar elements Bootstrap-5

When working with Bootstrap's Navbar, only use the supported content. Follow the guidance from the docs...

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.

Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.

Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

So, following this guidance for your Navbar...

1. Assuming you want it to always remain horizontal, add the navbar-expand class.
2. The nav-links should be contained inside a navbar-nav (supported content)
3. Use the spacing/flex utility classes. To center the navbar-nav, use w-100 to create 3 equal width navbar divs/sections. Then justify-content-center on the navbar-nav to center content of the middle section.

   <nav class="navbar navbar-expand bg-primary mt-3">
        <div class="container-fluid">
            <div class="w-100">
                <img src="//placehold.it/60x30" class="ms-4" width="60" alt="Logo">
                <a class="navbar-bran text-light ms-5 fw-bold">TEST</a>
            </div>
            <div class="navbar-nav justify-content-center">
                <a class="nav-link text-light">One</a>
                <a class="nav-link text-light">Two</a>
                <a class="nav-link text-light">Three</a>
                <a class="nav-link text-light">Four</a>
            </div>
            <div class="w-100">
            </div>
        </div>
   </nav>

Demo

Since Bootstrap 5 still uses flexbox like Bootstrap 4, aligning Navbar content hasn't changed between the 2 versions.

Getting space between navbar list items

Not sure how much space you need but you have too many flex nesting and seems unnecessary. I removed the flex properties on the nav.

Your html was also invalid as ul cannot contain div tags

The issue before was you nested 2 flex elements making the 2nd element becoming a flex child of the first flex container and the first flex container had justify-content space between effectively making your second flex container(flex child of first container) width less than 100%

.NorMenu {  display: flex;  align-items: center;  justify-content: space-between;}
#header {  background-color: black;}
nav {  padding-top: 5rem;  text-transform: uppercase;}
li a {  color: red;}

<header id="header">  <nav>    <ul class="NorMenu">      <li class="logo"><a href="index.html">Logo</a></li>      <li><a href="index.html">Home</a></li>      <li><a href="Contact.html">Contact</a></li>      <li><a href="elements.html">About</a></li>    </ul>  </nav></header>

body {  margin: 0; /* Added */}
ul {    list-style-type: none;    margin: 0;    padding: 0;    background-color: #141414;    height: 80px;    border-radius: 5px;}
li {    float: right;    display:inline;    list-style-type:none;}
li a {    font-family: Julius Sans One, Arial;    font-size: 19px;    display: block;    color: white;    text-align: center;    padding: 30px 20px;    text-decoration: none;}
.logoimg {    height: auto;    margin-left: 150px;    margin-top: 5px;}
.left {    float: left;}

<div>     <ul>        <li class="left"><img class="logoimg" src="/images/logo.png"></li>        <li><a>Test 1</a></li>        <li><a>Test 2</a></li>     </ul></div>