Make one <li> item in my navbar float left, and the rest float right (Bootstrap 5)

Question

I'm working on my first html/css project ever, and I'm using bootstrap. I have a little html experience using Blogger in the past.

When my navbar is expanded, I want the first li item (a button) to float to the left of the page, and the rest of it to float right.

I can get all the items to float one way or the other using flex-start or flex-end but I can't seem to apply it to this single element. I tried using the margin-right property to force it as well, but the results were pretty inconsistent.

I've gone through a bunch of codeply samples as well, and the only other solution I found was treating the button like a logo, which wouldn't collapse into the navigation menu when it became a hamburger.

<nav class="navbar navbar-expand-md">
  <button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav">
      <li>
        <a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Any custom CSS I wrote to override bootstrap was just for colors and fonts, so I don't think it would affect anything, but I can add it if anyone needs to double check.

Thanks in advance.

Answer 1

This code seems to place the 'Download Resume' button to the left on medium size screens and larger

<nav class="navbar navbar-expand-md">
      <button class="navbar-toggler navbar-dark collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div id="main-navigation" style="" class="navbar-collapse justify-content-between collapse">
        <div>
          <a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
       </div>
       <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
       </ul>
      </div>
    </nav>