React header 无法填满屏幕

Question

I'm new to React and don't really understand why my code will not fill the screen horizontally.

If I open the page then this it what is shown for the header:

However for some reason it is also possible to scroll to the side so it will look like:

Which doesn't look that great. What have is wrong and how can it be fixed?

Header.jsx

function Header(){ 

  return (
  <Navbar className="navbar-container" bg="dark" variant="dark" expand="lg">
    <Navbar.Brand href="https://github.com/">
      <img src={logo} alt="logo" style={{ width: 100, height: 100 }} />
      </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav" className="navbar-collapse">
      <Nav.Link href="home">Home</Nav.Link>
      <Nav.Link href="projects" >Projects</Nav.Link>
      <Nav.Link href="settings" >Settings</Nav.Link>
    </Navbar.Collapse>
    <Navbar.Text lg="6" className="d-none d-lg-block">Daily progress:</Navbar.Text>
    <ProgressBar bgcolor="#6a1b9a" completed="60"/>
  </Navbar>
  );
}

export default Header;

Header.css

.navbar-container {
  width: 100%;
}

.navbar-collapse {
  text-align: center;
}

I thought adding "width:100%" to the navbar-container would fix it, but it didn't do anything.

Answer 1

It seems that you are scrolling the page, not the header itself. You better check the other elements, since they might overflow.

If you checked other elements: Really depends on what other styles are added to the element, but you can try:

max-width: 100%; as Ollie said, but keep in mind the box model:

.navbar-container {
  max-width: 100%;
  box-sizing: border-box;
}

Or you can hide the overflow:

.navbar-container {
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden; // if necessary
}