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>