Uneven spacing between flex items when using flexbox [duplicate]

NavBar.js

import React from "react";import ReactDOM from 'react-dom';import ReactDOMServer from 'react-dom/server';import './NavBar.css';function NavBar() {  const heading = 'first heading'  let list = ['About Us', 'Career Page', 'Resources']  const BuildList =  () => {     return(<><div className = 'nav-container'><div className='logo-container'> Logo Container</div><div className='nav-content-container'></div><div className="navbar-primary-menu">          { list.map((key) => (<div className='navbar-primary-menu-items' key={key}> {key} </div>)) }</div><div className="search-container"><svg className='search-icon' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="80" height="80" viewBox="0 0 48 48"><path fill="#616161" d="M34.6 28.1H38.6V45.1H34.6z" transform="rotate(-45.001 36.586 36.587)"></path><path fill="#616161" d="M20 4A16 16 0 1 0 20 36A16 16 0 1 0 20 4Z"></path><path fill="#37474F" d="M36.2 32.1H40.2V44.400000000000006H36.2z" transform="rotate(-45.001 38.24 38.24)"></path><path fill="#64B5F6" d="M20 7A13 13 0 1 0 20 33A13 13 0 1 0 20 7Z"></path><path fill="#BBDEFB" d="M26.9,14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2,1.2-6.9,3.2c-0.4,0.4-0.3,1.1,0.1,1.4c0.4,0.4,1.1,0.3,1.4-0.1C16,13.9,17.9,13,20,13s4,0.9,5.4,2.5c0.2,0.2,0.5,0.4,0.8,0.4c0.2,0,0.5-0.1,0.6-0.2C27.2,15.3,27.2,14.6,26.9,14.2z"></path></svg><input className='input-field' type='text'></input></div></div> </>    );  };  // const element = <ul> <li>Hello there</li></ul>  return(<div><BuildList/></div>  );}export default NavBar

NavBar.css

.nav-container {  display: flex;  background: cyan;  justify-content: space-between;  align-items: center;  border: 2px solid black;  width: 100%;  gap: 10px}.list {  list-style-type: none;  border: 10px solid yellow;}li {  padding: 5px;  margin: auto;  border: 10px  solid red;}.logo-container {  display: flex;  align-items: center;  border: 2px solid black;  margin-left: 2em;}.text-box {  margin-right: 10px;  margin-left: 20px;}.text-box input[type="text"] {  width: 10px;}.navbar-primary-menu {  display: flex;  flex-direction: row;    justify-content: space-around;  max-width: 30%;  border: 2px solid white;}.navbar-primary-menu-items {  border: 2px solid red;}.search-container {  display: flex;  align-items: flex-end;  padding: 2px;  margin-right: 2em;}.search-icon {  border: 2px solid yellow;  max-height: 30px;  max-width: 30px;}.input-field {  max-height: 100px;  max-width: 100px;}

I am trying to build a navbar using flexbox. ( I am total beginner and i don't understand css much, trying out stuff to understand css)

But the problem is, the flex-items as shown in the attached image are

1. Logo container in the left
2. A small menu in the middle
3. A search box div in the right.

The problem i have is,

'A small menu in the middle' div has more space in the left and less space to the right . i.e space from the logo-container to the 'small menu' is more. I don't know how to fix it

What i am trying to do:

1. use space-between
2. make sure the space from the middle menu div to the left and the space from the middle menu div to the right are same.

( The uneven gap i am mentioning is the 'blue colored gap with stripes shown in the image)

Can someone help me understand how to do this?