Bootstrap Navbar Not Spanning Full Width or Touching Top

Question

I'm having trouble with the Bootstrap navbar in my React application. The navbar isn't spanning the full width of the screen, leaving gaps on the left and right sides. It also doesn't touch 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;

Things I've tried:

1. Removing any container wrapping the navbar.
2. Overriding Bootstrap styles to ensure full width and zero margins.

However, I haven't been able to get the navbar to span the full width and touch the top. Does anyone have suggestions on how to resolve this?

Answer 1

Where you're using the navbar, are there any other containers or styles that could be affecting it? Even if the navbar is the only thing, there could be base styles applying to the body element, for example.