could someone explain why this is happening?
I have made it have 100% width, but for some reason on this resolution it breaks.
Not asking for spoonfeeding or anything, just want to know why is this happening. Thanks to everyone in advance!
<section class="hidden lg:block ">
<div class="w-[100%] flex align-middle justify-center bg-gray-900">
<div class="w-[80%] flex justify-center lg:w-[1170px] h-[100px]">
<div class="w-[150px] flex content-center items-center align-middle font-black">
<h1 class="text-red-300 text-3xl text-center">Fire Shop</h1>
</div>
<div
class="flex nav-items justify-center content-center w-[870px] align-middle space-x-8 items-center font-semibold">
<div class="flex w-[450px]">
<div class="bg-gray-800 h-[40px] w-[40px] flex justify-center items-center rounded-s-md">
<img src="/img/magnifying-glass.svg" alt="search" class="w-[20px] h-[20px] m-0 ">
</div>
<input type="text" placeholder="Search products..."
class="w-[100%] h-[40px] px-4 py-2 bg-gray-800 focus:outline-none text-white outline-none placeholder-gray-500 rounded-e-md">
</div>
</div>
<div class="w-[150px] flex items-center justify-center">
<a href="/cart" class="flex items-center justify-center flex-col">
<div
class="w-[42px] h-[42px] flex items-center justify-center border-white rounded-full border-[2px]">
<img src="/img/cart.svg" alt="cart" class="w-[22px] m-0">
</div>
<h3>View Cart</h3>
</a>
</div>
</div>
</div>
<div class="sticky top-0 z-50 w-[100%] flex align-middle justify-center bg-gray-900">
<div class="w-[80%] flex justify-center lg:w-[1170px] h-[66px]">
<div
class="flex nav-items justify-center content-center w-[1170px] align-middle space-x-8 items-center font-semibold">
<a href="/" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Home</a>
<a href="/minecraft" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Minecraft</a>
<a href="/fivem" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">FiveM</a>
<a href="/website" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Website</a>
<a href="/roblox" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Roblox</a>
<a href="/discord" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Discord Bot</a>
</div>
</div>
</div>
</section>
>Solution :
Here is a fixed version: https://play.tailwindcss.com/2LVyRjIaV0
What I did is replace w-[870px] with flex-grow.
That way the mddle item is no longer forcing the header width to a total of 1170px ( w-[150px] + w-[870px] + w-[150px]
<div class="w-[100%] flex align-middle justify-center bg-gray-900">
<div class="w-[80%] flex justify-center lg:w-[1170px] h-[100px]">
<div class="w-[150px] flex content-center items-center align-middle font-black">
<h1 class="text-red-300 text-3xl text-center">Fire Shop</h1>
</div>
<div
class="flex nav-items justify-center content-center flex-grow align-middle space-x-8 items-center font-semibold">
<div class="flex w-[450px]">
<div class="bg-gray-800 h-[40px] w-[40px] flex justify-center items-center rounded-s-md">
<img src="/img/magnifying-glass.svg" alt="search" class="w-[20px] h-[20px] m-0 ">
</div>
<input type="text" placeholder="Search products..."
class="w-[100%] h-[40px] px-4 py-2 bg-gray-800 focus:outline-none text-white outline-none placeholder-gray-500 rounded-e-md">
</div>
</div>
<div class="w-[150px] flex items-center justify-center">
<a href="/cart" class="flex items-center justify-center flex-col">
<div
class="w-[42px] h-[42px] flex items-center justify-center border-white rounded-full border-[2px]">
<img src="/img/cart.svg" alt="cart" class="w-[22px] m-0">
</div>
<h3>View Cart</h3>
</a>
</div>
</div>
</div>
<div class="sticky top-0 z-50 w-[100%] flex align-middle justify-center bg-gray-900">
<div class="w-[80%] flex justify-center lg:w-[1170px] h-[66px]">
<div
class="flex nav-items justify-center content-center w-[1170px] align-middle space-x-8 items-center font-semibold">
<a href="/" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Home</a>
<a href="/minecraft" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Minecraft</a>
<a href="/fivem" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">FiveM</a>
<a href="/website" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Website</a>
<a href="/roblox" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Roblox</a>
<a href="/discord" class="nav-item hover:text-gray-300 ease-in-out duration-200 text-[18px]">Discord Bot</a>
</div>
</div>
</div>
</section>