I'm running into an issue with the Bootstrap navbar within my React project. The navbar is not extending across the entire width of the screen, resulting in empty space on both the left and right sides. Additionally, there is a gap between the navbar and the top of the screen.
import React from "react";
import "./header.css";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
const Header = () => {
return (
<>
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#about">About</Nav.Link>
<Nav.Link href="#contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
};
export default Header;
https://i.sstatic.net/X902Y.png
Ways I've attempted to fix this issue:
- Removing any container that wraps the navbar.
- Modifying Bootstrap styles to ensure full width and zero margins.
Unfortunately, I have been unsuccessful in getting the navbar to span the entire width and touch the top. Does anyone have any advice on how to address this problem?