Changing alignment for links using bootstrap scrollyspy

I am struggling to justify the scrollyspy links to the center of the navbar. Can someone please help? Thanks!

<ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>

The alignments on this site are funky, but on VSC they are normal.

Here is my css:

.nav-pills {
    display: flex;
    align-content: center;
    justify-items: center;
}

I tried going with the flex approach.

Thanks for the help.