Spacing between nav items and nav brand

Question

I'm doing a navbar on my website in responsive . But I want a space between navbar brand and nav items... I tried to make a space with justify content (between, evenly, around etc ..) on "navbar-container" Nothing works . .. Any ideas ? thank you :-D

import {
  Container,
  Navbar,
  Nav,
} from 'react-bootstrap';
import logo from 'src/assets/images/logo.png';

const AppHeader = () => (
  <div>
    <Navbar id="mainNav" expand="lg">
      <Container id="navbar-container">
        <Navbar.Brand href="#home"> <img src={logo} alt="logo" height="80" />
        </Navbar.Brand>
        <h2 className="navbar-title">Concert'o</h2>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav ">
          <Nav className="">
            <Nav.Link className="ms-auto" href="#home">Accueil</Nav.Link>
            <Nav.Link href="#home">Genres</Nav.Link>
            <Nav.Link href="#home">Régions</Nav.Link>
            <Nav.Link href="#home">Tous les événements</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  </div>
);
export default AppHeader;

@use 'src/styles/vars';

#mainNav{
  background-color: vars.$backgroundColor;
}
.navbar-title{
  color: vars.$fontColor !important;
  margin-right: 1em;
  font-weight: bolder;
  text-align: center;
}

.nav-link {
  color: vars.$fontColor !important;
  font-weight: bold;
  text-align: center;
}

Answer 1

As Navbar is a flexbox, you can take use of "gap-x" bootstrap class. On the other side, you can use the "ps-x" or "ms-x" bootstrap classes on Nav:

Edit: If you want to spread nav items evenly, add "flex-grow-1" and "justify-content-evenly" classes to the Nav:

https://codesandbox.io/s/great-darkness-z4nek4