Как выровнять реагирующие bootstrap элементы панели навигации?

Question

Как бы установить кнопки registered as и logout, чтобы выровнять ее вправо? Я попытался использовать justify content на navbar.text и установить его для выравнивания вправо. Кстати, родитель уже настроен на сгибание:

<Navbar onToggle={()=>setExpanded(!expanded)} expanded={expanded} bg="primary" variant="dark" expand="lg" fixed="top">
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav>
    <Nav.Link as={Link} to="/" className='header-router-a' onClick={() => setExpanded(false)}>
      Home
    </Nav.Link>
    <Nav.Link as={Link} to="/quiz" className='header-router-a' onClick={() => setExpanded(false)}>
      Personality Quiz
    </Nav.Link>
    <Nav.Link as={Link} to="/shopper" className='header-router-a' onClick={() => setExpanded(false)}>
      Shopper
    </Nav.Link>
    <Nav.Link as={Link} to="/contact" className='header-router-a' onClick={() => setExpanded(false)}>
      Contact
    </Nav.Link>
  </Nav>
  {loggedin ? 
  <Nav>
    <Navbar.Text className="auth"as={Link} to={`/profile/${state.user}`}  onClick={() => setExpanded(false)} >
      Signed in as: {state.user}
    </Navbar.Text >
    <Button onClick = {() => {
      localStorage.removeItem("jwtToken");
      setExpanded(false)
      setAuthToken(false);
      dispatch({
        type: 'SET_CURRENT_USER',
        payload : {}
      });
    }} >
      Log Out 
    </Button>
    </Nav>
    : <Button onClick={() => {history.push("/login"); setExpanded(false)}}>
        LOG IN 
      </Button>
    }
  </Navbar.Collapse>
</Navbar>

.bg-primary{
  background-color: #33DBFF;
  opacity: 0.95;
}

/*not working*/
.auth {
  margin-right: auto;
  justify-content: end;
}

Вот как это выглядит в настоящее время:

Answer 1

Ребенок не был правильно вложен !!!!