react-bootstrap flex/ justify-content is not working - reactjs

Question

I'm doing instagram clonecoding with react, react-bootstrap, scss
Navbar was created, but it is not centered with flex box.
How can I solved this problem?
why flex center is not working?
And how do you typically customize in react-bootstrap?
Header.js
<Navbar className="navbarContainer align-items-center" fixed="top">
<div className="nav">
<Navbar.Brand href="/">
<img src={insta_logo} alt="instagram_logo" />
</Navbar.Brand>
<Form>
<FormControl
type="text"
placeholder="Search"
className="searchBar"
/>
</Form>
<Nav
navbar="false"
className="flex-row navRight"
>
<Nav.Link href="/">
<Home fontSize="24px" />
</Nav.Link>
<Nav.Link href="/message">
<Send fontSize="22px" />
</Nav.Link>
<Nav.Link href="/explore">
<Compass fontSize="24px" />
</Nav.Link>
<Nav.Link href="/favorite">
<Heart fontSize="24px" />
</Nav.Link>
<NavDropdown
title={
<Image
src={face}
roundedCircle
className="profileImg"
></Image>
}
drop="left"
>
<NavDropdown.Item href="#action/3.1" className="dropdownItem">
<Profile className="marginRight" />
<span>Profile</span>
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2" className="dropdownItem">
<Bookmark className="marginRight" />
<span>Bookmark</span>
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3" className="dropdownItem">
<Setting className="marginRight" />
<span>Setting</span>
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.4" className="dropdownItem">
<Switch className="marginRight" />
<span>Switch Account</span>
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Log Out</NavDropdown.Item>
</NavDropdown>
</Nav>
</div>
</Navbar>
header.scss
#mixin flex($justify: null, $align: null) {
display: flex;
justify-content: $justify;
align-items: $align;
}
.navbarContainer {
#include flex(center);
border-bottom: 1px solid #dbdbdb;
z-index: 200;
background-color: #fff;
.nav {
width: 940px;
display: flex;
justify-content: space-between;
align-items: center;
}
.searchBar {
height: 30px;
width: 220px;
background-color: #fafafa;
}
.navRight {
width: 225px;
display: flex;
justify-content: space-between;
}
.profileImg {
width: 25px;
height: 25px;
}
.dropdownItem {
#include flex(null, center);
.marginRight {
margin-right: 8px;
}
}
}
screen
enter image description here
I used a translator because I am not good at English. Please understand if the sentence is not good.
thank you

Answer 1

I found bootstrap class
Bootstrap can make layout using class.
https://getbootstrap.com/docs/4.0/utilities/flex/#enable-flex-behaviors
I modified the code
<Navbar
className="d-flex justify-content-center navbarContainer"
fixed="top"
>