0

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;

enter image description here

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?

Kasra Panahi
  • 13
  • 2
  • 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. – Tom Pietrosanti Aug 14 '23 at 18:37
  • 1
    That worked! #root had css that added a max width, margin, and padding. Thanks for the help! – Kasra Panahi Aug 15 '23 at 04:56
  • I will move the suggestion to an answer so you can accept it and mark your question as solved, in case it helps others. – Tom Pietrosanti Aug 15 '23 at 13:28

1 Answers1

0

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.

Tom Pietrosanti
  • 4,184
  • 2
  • 24
  • 29