Html – Why is overflow scrolling not working on big screen?

I am working on a Vue project and I have this HTML:

 <div class="flex flex-col md:flex-row">
  <div class="m-6 ml-10 mr-5 mt-10">
    <div class="text-left">
      <input type="text" class="mb-6 h-10 w-full rounded-lg border-2 border-gray-300 p-2" placeholder="Search for workouts, profiles, etc." />
    </div>
    <div class=" ">
      <div class="mb-3 text-left">
        <p>Explore workouts</p>
      </div>
      <div class="flex h-28 flex-row gap-3 overflow-x-auto whitespace-nowrap">
        <div class="box inline-flex min-w-52 bg-black"></div>
        <div class="box inline-block min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box min-w-52 bg-black"></div>
        <div class="box mb-5 min-w-52 bg-black"></div>
      </div>
    </div>
    
  </div>
</div>

I am using tailwind for this. The problem is that I have overflow-x-auto does not work on big screen sizes but when I minimize 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: