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

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.

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>