enter image description hereI want to move these blocks in the centre of the page.I have used html and tailwind css.I have tried justify-centre but its not working. please help.Here's the html code.[
<main>
<div class="justify-center items-center">
<div class="bg-blue-200 py-20 text-center">
<!-- grid -->
<div class="flex">
<div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
</div>
<div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
</div>
<div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border">
</div>
</div>
</div>
</div>
</div>
</main>
Add justify-center to the class where whole blocks have parent div, that is line number 4
<main>
<div class="justify-center items-center">
<div class="bg-blue-200 py-20 text-center">
<!-- grid -->
<div class="flex justify-center">
<div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
</div>
<div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
</div>
<div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
<div class="cursor-pointer bg-slate-500 h-20 w-20 border-blue-200 border"></div>
</div>
</div>
</div>
</div>
</main>