How to align react bootstrap navbar items?

Question

How would I set the registered as and logout button to align it to the right? I tried to use justify content on the navbar.text and set it to align the right. BTW the parent is already set to flex:

<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;
}

this is what it looks like currently:

Answer 1

Child was not nested properly!!!!