im working on a vue projects and I have this html

<div class=" ">
  <div class="tw-text-left mb-3">
    <p>Explore workouts</p>
  </div>
  <div class="tw-overflow-x-auto tw-w-full ">
    <div class="tw-flex-row tw-flex tw-gap-3 tw-h-28">
      <div class="box tw-min-w-52"></div>
      <div class="box tw-min-w-52"></div>
      <div class="box tw-min-w-52"></div>
      <div class="box tw-min-w-52"></div>
      <div class="box tw-min-w-52"></div>
      <div class="box tw-min-w-52"></div>
      <div class="box tw-min-w-52 mb-5"></div>
    </div>
  </div>
</div>

im using tailwind for this. The problem is that I have overflow-x-auto does not work on big screen sizes. But when I minimise the screen it works. On big screen it scrolls into a white space. Will add a photo underneath with how it looks like on big screen vs small screen.

I tried to use positioning relative but that did not work.

On big screen:

on small screen: