How to force content in NEXT UI navbar to the edges making full header?

Question

While using NEXT JS I'm trying to test the NEXT UI components in the examples on NEXT UI web site so I started with the navbar everything is ok but how to move its contents to the edges? why it's in the middle with like sort of padding or margin?

My navbar component copied same as in the site to a component file and executed directly like this in page.tsx

   <header>
      <Nav />  <-- the navbar file no fancy work
    </header>

I tried to remove padding, margin, use flex justify around apply things on header apply on navbare apply on navbarcontent however nothing works!

so any idea how to force them to occupies all that space making a full header ?

Answer 1

Respected Sir,

The reasons why content is not moving to the edge is Width of Navbar !

Default is lg

They have provided props (scroll down to API section in bottom) which contains maxWidth property & it has valid values :

sm | md | lg | xl | 2xl | full

By default it's lg

You may pass full to get desired result.

<Navbar maxWidth={'full'}>