Can not get the NavBar links to correct position in React js

Question

I am creating a facebook clone web application for my school project. I just created the navigation bar of my web page!

Its looks like this:

But I just wanna develop it like this:

But I am confused with that I try so many times! I wanna get the 'Home' link and 'Profile' link to correct position!

these are the code I used:

react js:

import React from 'react';
import SearchIcon from '@mui/icons-material/Search';
import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
import SettingsIcon from '@mui/icons-material/Settings';
import "./NavBar.css"

export default function NavBar() {
  return (

    <div className="navBarBox">

      <div className="navBarLeft">
        <span className="logo">fakebook</span>
      </div>

      <div className="navBarCenter">
        <div className="searchBarBox">
          <SearchIcon className='serachIcon'/>
          <input placeholder='Search For your Friends ' className="searchInput" />
        </div>
      </div>

      <div className="navBarRight">
        <div className="navBarLinks">

          <span className="navBarLink">Home</span>
          <span className="navBarLink">Profile</span>

          <div className="navBarIcons">
            <div className="navBarIcon">
              <PeopleAltIcon/>
              <span className="iconTag">3</span>
            </div>
            <div className="navBarIcon">
              <QuestionAnswerIcon/>
              <span className="iconTag">5</span>
            </div>
            <div className="navBarIcon">
              <SettingsIcon/>
              <span className="iconTag">2</span>
            </div>

          </div>
        </div>

        <div className="pics">
          <img src="/Images/1.jpg" alt="" className="profilePicImg" />
        </div>
      </div>

    </div>

  )
}

css:

.navBarBox{
    height: 50px;
    width: 100%;
    background-color: #3b5998;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
}

.navBarLeft{
    flex: 3;

}

.navBarCenter{
    flex: 5;

}

.navBarRight{
    flex: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.navBarIcons{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navBarIcon{
    margin-left: 10px;
}

.navBarLinks{
    margin-left: 10px;
    font-size: 15px;
}

.profilePicImg{
    width: 38px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;

}

.logo{
    font-size: 35px;
    margin-left: 10px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.searchBarBox{
    width: 100%;
    height: 30px;
    background-color: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
}

.serachIcon{
    margin-left: 10px;
}

.searchInput{
    border: none;
    width: 80%;
    outline: none;
}

Answer 1

You only have to add one more display: flex; to .navBarLinks. Your CSS should look like this:

.navBarLinks{
    margin-left: 10px;
    font-size: 15px;
    display: flex;
}