I’ve been trying to learn Bootstrap on and off for the past couple of years and want to use it to update my portfolio website. I did ask a question about the navbar in small view that was close to being solved:

How to adjust the alignment of links in the navbar in small view in Bootstrap 5

The answer provided was to use flex to adjust the navbar the way I wanted it to look in small view but created another issue in large view which I think has to do with the container that has an empty svg and portfolio span:

The advice I was provided was to add flex to my extra css in small view:

.nav-item {
  flex: 0 0 150px;
  display: flex;
}

I kind of understand the advice. In the extra css in small view:

.nav-item prevent shrinking and growing by setting it to 0 and have it set to the specific width of 150 pixels.

Then it led me to looking at the container with the empty svg and portfolio span:

<div class="container fixed-top bg-white py-3 d-flex">
      <header class="d-flex flex-wrap justify-content-center">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
          <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
          <span class="fs-4">Portfolio</span>
        </a>

Do I need to shrink the container to have the links appear on one line?
If so, how is that written? Do I need to adjust the container class and name it something else then in the extra css in the large view change the width to specific number of pixels? Here is the complete html:

<header>
    <div class="container fixed-top bg-white py-3">
      <header class="d-flex flex-wrap justify-content-center">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
          <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
          <span class="fs-4">Portfolio</span>
        </a>
  
        <ul class="nav nav-pills">
          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">About</a></li>
          <li class="nav-item"><a href="#" class="nav-link">PowerPoint</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Infographics</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Logos and Icons</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Web Design</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
        </ul>
    </div>
    </header>

What I did try was to change the width of .nav-pills in large view in the extra css:

nav-pills {
    width: 900px;
 }

Which does place all the links on one line but the spacing between links is unequal:

I would like to have the blog link line-up with the edge of the blue box and the links to have equal spacing like this in large view:

Thank you,