Weird Space Between Image and Card

I'm making a website, and I'm pretty much done with it, except for one thing. See, I have an InfoComponent (or card for the sake of simplicity), and on the the 1st and 3rd cards, the images are on the left, but the second's image is on the right. However, now when I view the site on larger screens, the image isn't fully on the right.

Code:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex h-full flex-col rounded-l-xl md:flex-row">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full  md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?implementations.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay1.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>

      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
        <h2
          class="text-4xl font-medium md:font-semibold  text-white"
        >
          Implementations
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Whether it’s adding a new module to your existing Oracle PeopleSoft
          application or replacing a legacy ERP, we will perform fit-gap
          analysis, write data conversion processes and any other activities you
          need to ensure a successful project.
        </p>
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6">
        <h2
          class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
        >
          Upgrades
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          To use the most exciting enhancements Oracle PeopleSoft
          has made in over a decade, you should be on application version 9.2.
          We'll get you on the latest 9.2 image and tools version all while
          using best practice techniques for a lower total cost of ownership.
        </p>
      </div>

      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover  md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay2.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay3.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
        <h2
          class="text-4xl font-medium md:font-semibold text-white"
        >
          Ongoing System Support & Enhancements
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Are you taking full advantage of Integration Broker, using event
          mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
          objects, or implementing Fluid? If the answer is no to any of the
          above, we'll turn that NO into a resounding YES.
        </p>
      </div>
    </div>
  </article>
</section>

It seemed fine before, but now it broke. Why is this?

Solution

The images aren't fully to the right side because you haven't told them they should be. On smaller viewports, there is no surplus horizontal space within the cards, so all is well. With your flex layouts, the child elements will sit next to each other horizontally.

You may wish to spread them out to the extremes of the left and right. We can do this by setting justify-content: space-between:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex h-full flex-col rounded-l-xl md:flex-row">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full  md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?implementations.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay1.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>

      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
        <h2
          class="text-4xl font-medium md:font-semibold  text-white"
        >
          Implementations
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Whether it’s adding a new module to your existing Oracle PeopleSoft
          application or replacing a legacy ERP, we will perform fit-gap
          analysis, write data conversion processes and any other activities you
          need to ensure a successful project.
        </p>
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full md:justify-between">
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6">
        <h2
          class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
        >
          Upgrades
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          To use the most exciting enhancements Oracle PeopleSoft
          has made in over a decade, you should be on application version 9.2.
          We'll get you on the latest 9.2 image and tools version all while
          using best practice techniques for a lower total cost of ownership.
        </p>
      </div>

      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover  md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay2.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay3.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
        <h2
          class="text-4xl font-medium md:font-semibold text-white"
        >
          Ongoing System Support & Enhancements
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Are you taking full advantage of Integration Broker, using event
          mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
          objects, or implementing Fluid? If the answer is no to any of the
          above, we'll turn that NO into a resounding YES.
        </p>
      </div>
    </div>
  </article>
</section>

Or applying margin-left: auto to the image container:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex h-full flex-col rounded-l-xl md:flex-row">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full  md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?implementations.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay1.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>

      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
        <h2
          class="text-4xl font-medium md:font-semibold  text-white"
        >
          Implementations
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Whether it’s adding a new module to your existing Oracle PeopleSoft
          application or replacing a legacy ERP, we will perform fit-gap
          analysis, write data conversion processes and any other activities you
          need to ensure a successful project.
        </p>
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6">
        <h2
          class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
        >
          Upgrades
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          To use the most exciting enhancements Oracle PeopleSoft
          has made in over a decade, you should be on application version 9.2.
          We'll get you on the latest 9.2 image and tools version all while
          using best practice techniques for a lower total cost of ownership.
        </p>
      </div>

      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover  md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh] md:ml-auto"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay2.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay3.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
        <h2
          class="text-4xl font-medium md:font-semibold text-white"
        >
          Ongoing System Support & Enhancements
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Are you taking full advantage of Integration Broker, using event
          mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
          objects, or implementing Fluid? If the answer is no to any of the
          above, we'll turn that NO into a resounding YES.
        </p>
      </div>
    </div>
  </article>
</section>

Or applying margin-right: auto to the content container:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex h-full flex-col rounded-l-xl md:flex-row">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full  md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?implementations.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay1.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>

      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
        <h2
          class="text-4xl font-medium md:font-semibold  text-white"
        >
          Implementations
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Whether it’s adding a new module to your existing Oracle PeopleSoft
          application or replacing a legacy ERP, we will perform fit-gap
          analysis, write data conversion processes and any other activities you
          need to ensure a successful project.
        </p>
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6 md:mr-auto">
        <h2
          class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0"
        >
          Upgrades
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          To use the most exciting enhancements Oracle PeopleSoft
          has made in over a decade, you should be on application version 9.2.
          We'll get you on the latest 9.2 image and tools version all while
          using best practice techniques for a lower total cost of ownership.
        </p>
      </div>

      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover  md:h-full md:w-[31vh] md:rounded-r-xl md:rounded-tr-xl md:rounded-t-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay2.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
    </div>
  </article>
</section>

<section class="flex items-center justify-center">
  <!--Card-->
  <article
    class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:w-[115vh] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!-- Image -->
      <div
        class="relative h-80 shrink-0 overflow-hidden rounded-t-xl object-cover md:h-full md:w-[31vh] md:rounded-l-xl md:rounded-tr-none lg:w-[37vh]"
      >
        <img
          src="https://picsum.photos/500/500?upgrading.jpeg"
          alt=""
          class="h-full w-full object-cover opacity-40"
        />
        <img
          src="https://picsum.photos/500/500?overlay3.svg"
          class="absolute inset-0 h-full w-full object-contain p-8"
        />
      </div>
      <!--Content-->
      <div class="p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
        <h2
          class="text-4xl font-medium md:font-semibold text-white"
        >
          Ongoing System Support & Enhancements
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light"
        >
          Are you taking full advantage of Integration Broker, using event
          mapping instead of modifying Oracle PeopleSoft delivered PeopleCode
          objects, or implementing Fluid? If the answer is no to any of the
          above, we'll turn that NO into a resounding YES.
        </p>
      </div>
    </div>
  </article>
</section>