Tailwind causes HTML to malfunction at certain widths

Can someone please provide insight into why this issue is occurring? I have set the width to 100%, but for some reason, it breaks at this resolution. I am not seeking a solution handed to me, just an explanation of the root cause. Thank you in advance!

https://i.sstatic.net/wjAfSmKY.png

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

Answer №1

Check out the updated version here: https://play.tailwindcss.com/2LVyRjIaV0

I made a simple fix by swapping out w-[870px] with flex-grow.

This change prevents the middle item from dictating the header width to be 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing every identification within an HTML layout

I am brainstorming the idea of abstracting HTML templates for a host-plugin system that I am currently developing. In this system, a plugin provides its HTML template (compatible with hogan.js) in the form of a string. However, since ids are not allowed ( ...

javascriptjqueryhtmlmustachehogan.js

The subscription data for nested classes appears to be displaying as undefined

In my current project, I am utilizing Angular 8 and facing an issue with a nested class. The problem arises when trying to access data from an observable subscribe operation in the child class (Players) within the main Tournament class. Until the data is r ...

htmlangularnested

How can we add a class to div elements that are dynamically fetched using AJAX in HTML?

I am including additional HTML content upon clicking a "load more" button using the following JavaScript function: function addStuff() { $.get('page-partials/more-stuff.html', function(stuff) { $('#load-button').append(stuff); ...

javascriptjqueryhtmlcssajax

Does altering HX-GET in JavaScript have no impact on the outcome?

I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...

javascripthtmlfastapihtmx

Instructions for creating a nested list using a delimited string or an array:

Here are the results from my SQL query: Maths Maths|Algebre Maths|Algebre|Algebre 1 Maths|Algebre|Algebre 2 Maths|Algebre|Algebre 3 Maths|Analyse Maths|Analyse|Analyse 1 Maths|Analyse|Analyse 2 Maths|Probabilité physics I have tried various methods to c ...

phphtmlarraysrecursion

Centrally aligning elements within a responsive row using Bootstrap's adaptive row class

I have a variety of elements on my page that need to be displayed in straight columns, with multiple images aligned horizontally and vertically. Each image has the same size and when clicked, an icon menu with three items appears in its place. As the numb ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

What is the proper way to nest a <frameset> tag?

Attempting to nest a frameset inside another frameset has proven unsuccessful for me. I attempted to use the <frame> tag but encountered some issues. <frameset rows="15%,85%"> <frame style="background-color: orangered"></frame> ...

html

positioning of multiple buttons in a customized header for mui-datatables

I'm currently using mui-datatables in my app and have customized the table toolbar to include additional buttons. However, I've encountered an issue where adding a second button causes it to be displayed below the first one, despite there being e ...

cssreactjsmaterial-uimui-datatable

JavaScript issue causing unexpected behavior in top and left positions

I've been experiencing an issue with my JavaScript code on an HTML file. Despite changing the top or left values, the image does not move as expected. I've spent hours searching for a solution and even tried copying tons of different code snippet ...

javascripthtmlcss

What are the recommended practices for server-side Java when compiling CSS to SWF?

Users of my project have the ability to design custom CSS for our flexible application. When it comes to converting the CSS into SWFs on the server side: Is it recommended to utilize the flex2.compiler.css.Compiler class in mxmlc-3.5.0.12683.jar? Altern ...

javacssapache-flexflashmxmlc

Enable images to overlap with pre-set dimensions

Is it achievable for an image to overlap another div (a bootstrap column) while maintaining a fixed size of 155px? I am utilizing bootstrap columns (col-9 and col-3). This is the desired outcome (for illustration purposes, Orange and Grey boxes are image ...

htmlcssbootstrap-4bootstrap-5

CSS: Experimenting with creating a hover effect that lifts the box upwards

Hey there! I'm currently working on adding a red hover box for my Menu. The issue I am facing is that the hover box is displaying below the menu line. I am attempting to adjust the hover box to move a bit higher or up. You can view the image here: ht ...

cssmenuhover

Can you provide me with instructions on utilizing PNGs to create edge masks for an image?

After experimenting with border-image and PNGs to achieve textured borders, I'm curious if there is a method for masking in a similar fashion? I recently came across the Rumchata website which showcases what I have in mind. Their background has a blu ...

htmlcssimagepngmasking

Looking to position the div element at the center of the page using CSS styling

I have a webpage with four arrows positioned at the top left corner of the screen - pointing in different directions. I would like to align them in the center of the page so that they fit seamlessly into the layout without any scrolling required. Can anyon ...

htmlcss

Obtain the URL value using jQuery and place it inside a <span> element

How can I insert a href value into the span tag like this? <p class="name"> <a download="adja-lo.pdf" title="adja-lo.pdf" href="http://localhost/MatrixDRSnews/apps/Matrix/server/php/files/adja-lo.pdf">adja-lo.pdf</a> </p> ...

javascriptjqueryhtmlhref

Securing PayPal's purchase forms for safe online transactions

Trying to assist someone with a donation issue, but discovered that the source code allows for editing of values in the Paypal button. When selecting 5 points worth $5, it's possible to manipulate the values in the source code of the Paypal form. How ...

htmlformspaypalinject

When using Angular, the "contenteditable" attribute is rendered ineffective if the element is added through the use of "[innerHTML]"

I recently encountered a surprising issue with the contenteditable attribute in Angular. I have an object containing HTML code as values: public json_html = { "button1":"<p contenteditable='true'>first section</p>", "button2":"&l ...

htmlangulardomattributes

The stylesheet is linked, but no changes are taking effect

I've linked my template.php to style.css, and when I make changes in template.php, they show up fine. However, if I make changes in the stylesheet, nothing happens. What should I do? My website is not live; I'm working on it using a WAMP server. ...

javascriptphphtmlcss

prepend an element before the li element

I am currently working with Angular Material and I am trying to add the md-fab-speed-dial in front of an li element. However, when I attempt to do this, the md-fab-speed-dial appears below the li element, as shown in this image: https://i.sstatic.net/Rqz ...

cssangularjsangular-material

Using JavaScript or jQuery to eliminate particular HTML elements from a webpage

<div id="mn"> <p article="game" a_type="advertisement" cid="#P6_001"></p> <p article="let" cid="#P6_005"></p> <dc_title article="start" check_zone="true" a_type="masthead" cid="#P6_006"></dc_title> ...

javascriptjqueryhtmlalgorithm