How to align react bootstrap navbar items? - css

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!!!!