I am attempting to create a simple div where I want px-5 for mobile screens and px-20 for larger screens. However, only px-5 is working and px-20 is not applying on large screens. Can someone help me understand why?
Code Output Image
<div class="bg-white py-20 px-5 lg:px-20 ">
<div class="w-full md:w-1/2 mx-auto space-y-8">
<div class="bg-white py-20 rounded-xl shadow-lg p-6 flex flex-col items-center justify-between">
<div class="flex flex-col md:flex-row items-center justify-between w-full">
<div class="flex py-4 flex-col md:flex-row justify-start w-full h-full">
<div class="flex flex-col lg:ml-10 md:items-start">
<h2 class="text-xl md:text-4xl font-semibold mb-2 text-center md:text-left">
Lorem ipsum dolor sit
</h2>
<p class="text-gray-600 text-center md:text-left">
Porem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div className="flex flex-col justify-center sm:justify-center lg:justify-end md:flex-row mt-4 md:mt-0 w-full ">
<input
type="text"
placeholder="Enter email here"
className="lg:w-96 sm:w-1/2 py-2 px-2 sm:px-10 border border-gray-300 rounded-sm focus:outline-none focus:border-indigo-500 transition duration-150 ease-in-out"
// Adjust the width here, sm:w-1/2 means the input width will be half of the container on small screens and above
/>
<button
className="mt-3 lg:w-1/3 sm:mt-0 flex items-center justify-center md:ml-4 text-white py-3 px-4 rounded-sm hover:bg-orange-700 focus:outline-none focus:bg-orange-700 transition duration-150 ease-in-out"
style={{ backgroundColor: "#F68219" }}
// Adjust the width here, sm:w-1/2 means the button width will be half of the container on small screens and above
>
Start E-Filling Now
<img src="/arrow.svg" alt="" className="ml-2" />
</button>
</div>
</div>
</div>
</div>
</div>
Expected Result Image
In the second image shown in the link, you can see that I want px-20 to apply on large screens as expected.