Bring the navbar text to the center of the screen in CSS

[shivajikobardan]

TL;DR Summary

Bring navbar at center CSS

https://demo.w3layouts.com/demos_ne...a-liberty-demo_Free/2002651968/web/index.html

This is the website that I am trying to build.

This is my current navbar.

This is what I want to build.

My focus is on "Home" to "Contact". I want to put it at the center of the page like in the second one. My guess was to do display:flex justify-content: center. But it didn't work.
Please guide me how to make it work?

Here's the codepen.

 

[jack action]

Increase the value here:

.collapse {
  margin-left: 25%;
}

Or, better, remove the previous value and modify the following:

<ul class="navbar-nav me-auto  ">

to:

<ul class="navbar-nav mx-auto  ">

(That is how it is done in your link)

Can you identify what CSS rules change in this process?