I am making a navbar that has my logo and pages in the center and social media icons on the right, but anything change I've done to the social media nav component never moved them to the right, it stayed in the center:
Here is the code for this ( I am using react js, and the react-bootstrap module)
<Navbar expand="lg" className="py-3">
<Container>
<Navbar.Brand href="/src/">
<img
src="/assets/Logo.png"
width="60"
height="60"
className="d-inline-block align-top"
alt="Nexus Devops"
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto text-center">
<Nav.Link id='nav' href="/roadmap/">Updates</Nav.Link>
<Nav.Link id='nav' href="/careers/">Careers</Nav.Link>
</Nav>
<Nav className=" ms-auto social-media-icons navbar-right">
<Nav.Link href="#"><i className="fab fa-linkedin-in"></i></Nav.Link>
<Nav.Link href="#"><i className="fab fa-reddit-alien"></i></Nav.Link>
<Nav.Link href="#"><i className="fa-brands fa-twitter"></i></Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
I have tried by changing the className to 'justify-content-end' but that didn't do anything I add a css:
.social-media-icons {
margin-left: auto !important;
display: flex !important;
justify-content: flex-end !important;
}
again nothing, it never moved!
#container{
display:flex;
text-align:center;
margin-top:75px;}
.side{
width:40%;
border:solid blue 1px;}
#center{
width:20%;}
#fff{
float:right;}
<div id='container'>
<div class='side'>left</div>
<div id='center'>center</div>
<div class='side'>right
<div id='fff'>
<span>1</span>
<span>2</span>
<span>3</span></div></div>
</div>