correct way to center an element, full widt on mobile, fixed width on md and bigger

[opensas]

I'm trying to achieve a pretty common layout. An element that takes the whole width (minus some horizontal padding) on mobile, and then is centered and fixed to a certain width on larger displays.

This is the effect I'm trying to achieve:

https://tailwindui.com/components/application-ui/data-display/description-lists

I have these two attempts:

with a container: https://play.tailwindcss.com/0NdePFUHME?layout=horizontal&size=564x720

<div class="min-h-screen bg-gray-200 flex flex-col justify-center">
  <div class="px-4 bg-yellow-200">
    <div class="bg-white shadow-lg p-10 rounded-lg max-w-sm mx-auto text-center w-full">
      <p>Hello</p>
    </div>
  </div>
</div>

without a container: https://play.tailwindcss.com/wpa268AZRd?layout=horizontal&size=798x720

<div class="min-h-screen bg-gray-200 flex flex-col justify-center items-center px-4">
    <div class="bg-white shadow-lg p-10 rounded-lg max-w-sm --mx-auto w-full text-center">
      <p>Hello</p>
    </div>
</div>

I'd like to know which is more correct, and if there's a better, more standard way to achieve this basic layout

Thanks a lot

ps: unfortunately the source code for the tailwindUI component doesn't include the container