Why are the buttons shifted left?

Question

Falling a Udemy tutorial on Node, React, Express.

He is using a Header and his code shifts the Login and Cart links to the far right. I have the same code as he does, but my links are not shifted to the far right. I am using the React-bootstrap per the tutorial. My code is the same?

<header>
  <Navbar bg='dark' variant='dark' expand='lg' collapseOnSelect>
    <Container>
      <Navbar.Brand href='/'>BShop</Navbar.Brand>
      <Navbar.Toggle aria-controls='basic-navbar-nav' />
      <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='ml-auto'>
          <Nav.Link href='/cart'>
            <i className='fas fa-shopping-cart'></i>Cart
          </Nav.Link>
          <Nav.Link href='/login'>
            <i className='fas fa-user'></i>Login
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
</header>

Answer 1

Maybe you are using the latest bootstrap v5, which changed their ml and mr util classes to ms and me.

In, v5, left and right utils has been changed to start(s) and end(e)[1]. So, try replacing ml-auto to ms-auto.

Reference:

1. https://getbootstrap.com/docs/5.0/migration/#utilities