Navbar is not taking the full width of the page using nextui

Question

I am making a navbar with nextui components and on a full desktop screen I cannot bring the brand logo and the button to the side edges. There are 2 empty columns left. I attached the code below.

 <Navbar onMenuOpenChange={setIsMenuOpen}>
      <NavbarContent>
        <NavbarMenuToggle
          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          className="sm:hidden"
        />
        <NavbarBrand>
          <p className="font-bold font-inter text-inherit">Brand</p>
        </NavbarBrand>
      </NavbarContent>

      <NavbarContent className="hidden sm:flex gap-4" justify="center">
        <NavbarItem>
          <Link color="foreground" href="#">
            Features
          </Link>
        </NavbarItem>
        <NavbarItem>
          <Link color="foreground" href="#">
            Customers
          </Link>
        </NavbarItem>
        <NavbarItem>
          <Link color="foreground" href="#">
            Integrations
          </Link>
        </NavbarItem>
      </NavbarContent>
      <NavbarContent justify="end">
        <NavbarItem className="hidden lg:flex">
          <Link color="foreground" href="#">Login</Link>
        </NavbarItem>
        <NavbarItem>
          <Button as={Link} href="#" variant="flat">
            Sign Up
          </Button>
        </NavbarItem>
      </NavbarContent>

I have attached an image below, I would like those empty columns not to be seen on the sides. Screenshot:

I have tried to put flex and justify between in the Navbar Component and there is an empty column only on the right.

Answer 1

Seems as though you need to adjust the 'maxWidth' prop on the component. https://nextui.org/docs/components/navbar#navbar-props

Something like this:

<Navbar maxWidth="full" onMenuOpenChange={setIsMenuOpen}>

   ... Navbar Code Here ...

</Navbar>