Bootstrap 5 navbar - center pills regardless of screen size-CodePudding

My understanding is that I can nest container-fluid inside navbar and then use the grid. I'm trying to have a navbar have 3 elements: logo left, navigation breadcrumbs center, and then button on the right. I do this with col and it looks great in mobile. However, in a bigger screen, it pulls to the left and is messed up, even though all the cols add up to 12.

Codeply: https://www.codeply.com/p/jTBpYDfUk9

Here's the code:

<nav >
    <div >
        <div >
            <div >
              <img ...>
            </div>

            <div >
                <nav aria-label="">
                    <ul >
                      <li >
                        <a  href="#" aria-label="Previous">
                          <i aria-hidden="true" ></i>
                        </a>
                      </li>
                      <li  data-page="0"><a  href="#" tabindex="-1" aria-disabled="true">1</a></li>
                      <li  data-page="1"><a  href="#" tabindex="-1" aria-disabled="true">2</a></li>
                      <li  data-page="2"><a  href="#" tabindex="-1" aria-disabled="true">3</a></li>
                      <li  data-page="3"><a  href="#" tabindex="-1" aria-disabled="true">4</a></li>
                      <li >
                        <a  href="#" aria-label="Next">
                          <i aria-hidden="true" ></i>
                        </a>
                      </li>
                    </ul>
                </nav>
            </div>

            <div >
                <i  type="button" data-bs-toggle="offcanvas" data-bs-target="#cart-panel" aria-controls="cart-panel"></i>
            </div>
        </div>
    </div>
</nav>

CodePudding user response：

You just need to add one more bootstrap class w-100 on the 3rd line like this <div >