Search code examples
htmlcsstailwind-css

Tailwind breaks html on specific width

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!

enter image description here

<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>