Can you drop the code of what you have currently?

ah hello

here is page.tsx

import NavBar from "./components/navbar";

export default function Home() {
return (<main>
<NavBar />
<div className="absolute w-40 h-20 bg-blue-500"></div>
</main>
)
}

here is navbar.tsx

import Link from "next/link";
import React from "react";

interface Props{
children?: React.ReactNode
home? : React.ReactNode
about? : React.ReactNode
}

const NavBar : React.FC<Props> =({children = 'Serious Web App', home = 'home', about = 'about'}) => {
return (
<div className="navbar bg-blue-300">
<div className="flex items-center justify-between w-full">
<Link href="/" className="btn btn-active btn-ghost normal-case text-xl text-white">{children}</Link>
<Link href='/'className="ml-auto text-xl text-white" >{home}</Link>
<Link href='/about' className="ml-5 mr-40 text-xl text-white">{about}</Link>
</div>
<div className="flex-none"></div>
</div>

)
}

export default NavBar

uh hello?

sorry for not responding for so long

And what's the output look like rn?

Like this

first one is at 100 percent zoom , second one is at 33 percent zoo

I want that rectangle to not change size at all

Look at how the navbar responds but not that rectangle

Right now it's technically not changing size at all, the screen is just getting larger. If you want it to maintain the same relative size to the screen, use % based width. w-1/3 is the tailwind class for 33% width.

Tailwind Docs on width: https://tailwindcss.com/docs/width

If there's a certain width you want that's not listed there you can do something like w-[43%]

Oh ok

Thank you so goddamn much

But still I want it to conver the entire horizontal space it can

how to do that?

100% or screen

w-full or w-screen

Oh ok

thanks man you are a life saver

np