Currently, I am diving into the world of react while also incorporating bootstrap styles. My current project involves creating a navigation bar using bootstrap, however, I'm facing an issue where the navbar is displaying in the middle rather than where I intended it to be.
Below is the code snippet:
import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import "bootstrap/dist/js/bootstrap.bundle";
import { NavLink } from "react-router-dom";
function Navigation() {
return (
<>
<Navbar
collapseOnSelect
sticky="top"
expand="lg"
bg="dark"
variant="dark"
>
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={NavLink} to="/">
Home
</Nav.Link>
</Nav>
<Nav>
<Nav.Link as={NavLink} to="/about">
About
</Nav.Link>
<Nav.Link as={NavLink} to="/careers">
Career
</Nav.Link>
<Nav.Link as={NavLink} to="/question">
Questions
</Nav.Link>
<Nav.Link as={NavLink} to="/login">
Login
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
export default Navigation;
Observing the output results from the code above, you can see that there are unwanted spaces highlighted. My goal is to eliminate those spaces and push "Home" all the way to the left side and other items to the right side of the navbar.
I attempted to use classes like me-auto and ml-auto to adjust the alignment but they didn't yield the desired outcome.
I even resorted to manually adjusting margins with CSS, which did work but required tweaking for every pixel adjustment.
margin-left: -200px;
margin-right: 200px;
In another attempt, I experimented with display flex and justify-content properties, yet still faced issues.