Guys why this navbar is going to the right?
I want all them in middle

Here is my code :

  return (
    <header className="flex w-full items-center justify-between text-primary bg-background">
      <Nav onMenuOpenChange={setIsMenuOpen} className="h-full sm:h-11 w-full">
        <div className="flex items-center">
          <ButtonCN className="rounded-full hover:text-foreground" variant="link" size="icon">
            <ShoppingBagIcon className="h-6 w-6"/>
            <span className="sr-only">Cart</span>
          </ButtonCN>
          <Input
            classNames={{
              base: "w-32 sm:w-48 h-8",
              mainWrapper: "h-full",
              input: "text-small",
              inputWrapper: "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
            }}
            placeholder="جستجو"
            size="sm"
            startContent={<SearchIcon size={18} />}
            type="search"
          />
        </div>
        <div className="flex items-center justify-center flex-grow">
          <NavbarContent className="hidden sm:flex gap-10">
            <NavbarItem>
              <Link href="#" className="text-sm">
                آیفون
              </Link>....
          </NavbarContent>
        </div>
        <div className="flex items-center gap-4">
          <NavbarBrand className="flex items-center">
            <FaApple size={26} />
          </NavbarBrand>
          <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} className="sm:hidden" />
        </div>
        <NavbarMenu>
          <NavbarMenuItem>
            <Link className="text-white text-sm">
              Nigga
            </Link>
          </NavbarMenuItem>
        </NavbarMenu>
      </Nav>
    </header>
  );
}

As shown in the picture all of the labels are going like to the right part
They are not in the middle
Can someone help me fix it?
I changed justify, flex, anything and not fixed!!!