NavLinkを横並び、均等間隔にあけた中央寄せにしたい

やりたいこと:
NavLinkを横並び、中央寄せで、均等に間隔を開けて表示させたい。

やったこと:
多分cssでの指定の仕方が悪いのだと思いますが、
a に対して、inline-blockにすると横に並んでくれるので、
現状そのようになっています。

自分の中では、
display: flex;
justify-content: centerまたは、space-around
みたいにしたいのですが、現状は、display: flex;にするとNavBarが縦に並んでしまいます。。

中央寄せまで出来れば、margin設定でnavbar同士の間隔は設定できるのかなと
思っているのですが、
確認すべき箇所のご指摘、またはアドバイスいただけますと助かります。

SCSS
1.NavBar{
2  background-color: blue;
3  a {
4    font-weight: 800;
5    color: white;
6    display: inline-block;
7    }
8
9  }
10}
11

HTML
1return (
2    <div className="NavBar">
3			<nav>
4			<h2>Title</h2>
5			<NavLink
6						key="Home"
7						to="/"
8						className="nav-link nav-item"
9						exact
10						activeClassName="activeLink"
11					>
12						Home
13					</NavLink>{' '}
14					<NavLink
15						key="Products"
16						to="/products"
17						className="nav-link nav-item"
18						exact
19						activeClassName="activeLink"
20					>Products
21					</NavLink>
22					<NavLink
23						key="Services"
24						to="/services"
25						className="nav-link nav-item"
26						exact
27						activeClassName="activeLink"
28					>Services
29					</NavLink>
30					<NavLink
31						key="About"
32						to="/about"
33						className="nav-link nav-item"
34						exact
35						activeClassName="activeLink"
36					>
37						About
38					</NavLink><div>
39				    {token ? (
40              <><p>{loggedInUser}</p>
41                <button onClick={logout}>Log out</button>
42              </>
43            ) : (
44              <>
45                <button type="button" ><Link to="/login">Log in</Link></button>
46                <button type="button" ><Link to="/signup">Sign up</Link></button>
47              </>
48            )}
49			    </div>
50        {/* </div> */}
51			</nav>
52		</div>
53  )
54}
55