I have a series of dynamically created 'content' boxes that I need to justify left and flow to a new row depending on screen size. This part is working, however I want to get the div that contains those content boxes justified in the center of the page.
I have tried using shrink and max-w-fit but I can't get it to work. Also, I've tried mx-auto on both outer and inner divs but it doesn't work.
In the example below, the inner div appears to be stretching to 100% of the page width, rather than the width of the content divs, which I believe is stopping it from being justified in the center of the outer div.
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script><div id='outer' class='flex flex-col justify-center flex-initial shrink max-w-fit'><div id='inner' class='flex flex-row flex-wrap justify-start shrink max-w-fit gap-6 border-2 border-black'><div class='w-64 h-80 border-2 rounded border-black'><span>Div 1</span></div><div class='w-64 h-80 border-2 rounded border-black'><span>Div 2</span></div><div class='w-64 h-80 border-2 rounded border-black'><span>Div 3</span></div><div class='w-64 h-80 border-2 rounded border-black'><span>Div 4</span></div><div class='w-64 h-80 border-2 rounded border-black'><span>Div 5</span></div><div class='w-64 h-80 border-2 rounded border-black'><span>Div 6</span></div><div class='w-64 h-80 border-2 rounded border-black'><span>Div 7</span></div></div></div>