Tailwind CSS: Elements centered through grid in PC but not in iPhone Safari

I just learned Tailwind CSS and I have been stuck at this part of my code.

I made 3 column grid containing elements and made few codes for responsiveness. When I see it from my laptop, it looks good and centered but not in Safari of iPhone. I'm sure I missed something...

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="grid grid-cols-3 gap-5">
  <div class="col-span-full md:col-span-1 text-black pb-10 justify-items-center">
    <i class="fi fi-br-marker text-3xl"></i>
    <h2 class="text-xl font-semibold">BASED ON</h2>
    <p class="text-base text-gray-700">Bogor, Indonesia</p>
  </div>
  <div class="col-span-full md:col-span-1 text-black pb-10 justify-items-center">
    <i class="fi fi-br-envelope text-3xl"></i>
    <h2 class="text-xl font-semibold">EMAIL</h2>
    <p class="text-base text-gray-700"><a
                href="mailto:alihaidersult@gmail.com">alihaidersult@gmail.com</a></p>
  </div>
  <div class="col-span-full md:col-span-1 text-black justify-items-center">
    <i class="fi fi-br-share text-3xl"></i>
    <h2 class="text-xl font-semibold">SOCIALS</h2>
    <div>
      <ul class="flex gap-2 pt-2">
        <li><a target="_blank" href="https://www.facebook.com/alihaisul"><i
                            class="fi fi-brands-facebook text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.instagram.com/alihaisul"><i
                            class="fi fi-brands-instagram text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.tiktok.com/@alihaisul"><i
                            class="fi fi-brands-tik-tok text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.youtube.com/@alihaisul"><i
                            class="fi fi-brands-youtube text-2xl"></i></a></li>
      </ul>
    </div>
  </div>
</div>

In PC, the three elements are centered but in iPhone, it is on left side. Why is that and how can I center it?

PC View:

iPhone Safari View:

Solution

To center these <div> blocks on all screen sizes—including on iPhones—you'll want to adjust a couple of things in your Tailwind setup. Right now, the outer container is a 3-column grid, but it isn’t centered horizontally. Here's a quick fix:

✅ Wrap your grid in a flex container

Add a wrapper div with flex, justify-center, and flex-wrap utilities.

<div class="flex justify-center flex-wrap">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 text-center">
    <!-- Your 3 divs go here -->
  </div>
</div>

✅ Improve responsiveness

Replace grid-cols-3 with responsive column counts like grid-cols-1, sm:grid-cols-2, and md:grid-cols-3 so they stack nicely on smaller screens.

✅ Optional styling tips

Add text-center or center text in child items for cleaner look
Consider items-center and mx-auto if you use a fixed-width container.

This layout should now look great on iPhones, Android phones, tablets—basically, any screen you throw at it.

In action:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="flex justify-center flex-wrap"> <!-- added this -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 text-center"> <!-- change here -->
  <div class="col-span-full md:col-span-1 text-black pb-10 justify-items-center">
    <i class="fi fi-br-marker text-3xl"></i>
    <h2 class="text-xl font-semibold">BASED ON</h2>
    <p class="text-base text-gray-700">Bogor, Indonesia</p>
  </div>
  <div class="col-span-full md:col-span-1 text-black pb-10 justify-items-center">
    <i class="fi fi-br-envelope text-3xl"></i>
    <h2 class="text-xl font-semibold">EMAIL</h2>
    <p class="text-base text-gray-700"><a
                href="mailto:alihaidersult@gmail.com">alihaidersult@gmail.com</a></p>
  </div>
  <div class="col-span-full md:col-span-1 text-black justify-items-center">
    <i class="fi fi-br-share text-3xl"></i>
    <h2 class="text-xl font-semibold">SOCIALS</h2>
    <div>
      <ul class="flex gap-2 pt-2">
        <li><a target="_blank" href="https://www.facebook.com/alihaisul"><i
                            class="fi fi-brands-facebook text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.instagram.com/alihaisul"><i
                            class="fi fi-brands-instagram text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.tiktok.com/@alihaisul"><i
                            class="fi fi-brands-tik-tok text-2xl"></i></a></li>
        <li><a target="_blank" href="https://www.youtube.com/@alihaisul"><i
                            class="fi fi-brands-youtube text-2xl"></i></a></li>
      </ul>
    </div>
  </div>
</div>
</div> <!-- closing tag of wrapper div -->

I tested it on: https://Browserling.com/browse/safari