How can I right align a link within my React Bootstrap NavBar?

Question

I have run into some trouble aligning a 'Login' link within my Bootstrap NavBar. Here is the following code of the NavBar:

import React, { Component } from 'react';
import {Navbar, Nav, Container, NavDropdown} from 'react-bootstrap';
import restorifyLogo from '../Images/restorify-logo.png';

class NavbarComp extends Component {
  render() {
    return (
      <div>
              <Navbar className="planted-navbar" variant="dark" expand="lg">
                <Container className="navbar-container">
                  <Navbar.Toggle aria-controls="basic-navbar-nav" />
                  <Navbar.Collapse id="planted-navbar-collapse">
                    <Nav className="ml-auto">
                      <Navbar.Brand href="#home">
                      <img
                        src={restorifyLogo}
                        width="243px"
                        height="70px"
                        className="d-inline-block align-top"
                        alt="Restorify logo"
                      />{''}
                    </Navbar.Brand>
                      <NavDropdown title="Missions" id="missions-dropdown">
                        <NavDropdown.Item href="county-select">Missions Map</NavDropdown.Item>
                        <NavDropdown.Item href="current-missions">Current Missions</NavDropdown.Item>
                        <NavDropdown.Item href="completed-missions">Completed Missions</NavDropdown.Item>
                        <NavDropdown.Item href="start-mission">Start a Mission</NavDropdown.Item>
                      </NavDropdown>
                      <NavDropdown title="Trees" id="trees-dropdown">
                        <NavDropdown.Item href="my-trees">My Trees</NavDropdown.Item>
                        <NavDropdown.Item href="all-trees">Explore Trees</NavDropdown.Item>
                      </NavDropdown>
                      <Nav.Link href="about" id="about-link">About</Nav.Link>
                      <Nav.Link className="justify-content-end" href="login" id="login-link">Login</Nav.Link>
                    </Nav>
                  </Navbar.Collapse>
                </Container>
              </Navbar>
      </div>
    );
  }
}

export default NavbarComp;

I am using Bootstrap v5.2.2. Below you can see a screenshot of the NavBar.

Answer 1

My solution:

Within NavbarComp.tsx I placed the account links within their own div element.

<div className='account-links'>
     <Nav.Link className="justify-content-end" href="profile" id="profile-link">{currentUser.Username}</Nav.Link>
     <Nav.Link className="justify-content-end" href="/login" id="logout-link" onClick={this.logOut}>LogOut</Nav.Link>
</div>

Within the css, I gave the div the following style:

  .account-links {
    display: flex;
    margin-left: auto;
    color: white;
  }