Two Div in Navbar - Bootstrap 4

I'm having 2 div in Navbar. I'm getting the last item of both div just below of 1st item. I think there is a lack of horizontal space in each div that's why an item is shifting below. Or I might be missing something. All I want to set all items of every div in row. Which property do I need set to get my desired result. I'm not writing about 'logo' because that is in correct position(left side). My code is as below:

HTML

<header>    <Navbar expand="lg">      <a href="#home"><img src={require("../Assets/Images/hair_salon_logo.jpg").default}/></a>    <Navbar.Toggle aria-controls="basic-navbar-nav" />    <Navbar.Collapse id="basic-navbar-nav">      <Nav className="mr-auto">         <! -- DIV 1-->         <div>           <Nav.Link href="#home">Home</Nav.Link>        <Nav.Link href="#services">Services</Nav.Link>        <Nav.Link href="#stylists">Stylists</Nav.Link>        <Nav.Link href="#appointment">Appointment</Nav.Link>        <Nav.Link href="#contact">Contact</Nav.Link>        </div>        <! -- DIV 2-->        <div>         <Nav.Link href="#" id="twitter"><TwitterOutlined /></Nav.Link>        <Nav.Link href="#" id="facebook"><FacebookOutlined /></Nav.Link>        <Nav.Link href="#" id="youtube"><YoutubeOutlined /></Nav.Link>        <Nav.Link href="#" id="pause"><PauseOutlined /></Nav.Link>        <Nav.Link href="#" id="search"><SearchOutlined /></Nav.Link>        </div>      </Nav>    </Navbar.Collapse>    </Navbar>  </header>  

CSS

.PageWrap header .navbar {    padding-top: 0px;    border-top: 0px;  }  .navbar-nav {    flex-direction: row;    font-family: Open Sans;    font-size: 20px;    font-weight: 400;    width: 100%;    overflow: auto;    padding-top: 0px !important;    justify-content: space-between;  }  .navbar-nav a {    float: left;    color: black !important;    font-size: 17px;    width: 25%;     text-align: center;   }  .navbar-nav a:hover {  cursor: pointer;  color: red !important;  }   .navbar-nav a.active {    color: red !important;  }  @media screen and (max-width: 500px) {    .navbar-nav a {      float: none;      display: block;      width: 100%;      text-align: left;     }  }    .navbar-nav #twitter:hover{    cursor: pointer;    color: #55ACEE !important;  }  .navbar-nav #facebook:hover{    cursor: pointer;    color: #3B5998 !important;  }  .navbar-nav #youtube:hover{    cursor: pointer;    color: #bb0000 !important;  }  .navbar-nav #pause:hover{    cursor: default;    color: black !important;  }  

Output:

https://stackoverflow.com/questions/66594406/two-div-in-navbar-bootstrap-4 March 12, 2021 at 12:56PM