Grid layout - Card within main section

[MartijnHarmenzon]

I am trying to insert a card within a grid column. Somehow it is not doing anything with padding. I would like to fit the card nicely within the main section. So looking like a card wthin the main section.
Any suggestions?

Code I am using:

  <div class="grid grid-cols-12 grid-rows-3 gap-2 h-64">
    <nav class="row-span-3 col-span-1 bg-gray-600">
      Nav...
    </nav>

    <main class="row-span-3 col-span-8 bg-gray-500">
      <div class="bg-green-100 border border-black rounded shadow text-center uppercase p-4 h-full">
        Card1
      </div>
    </main>

    <aside class="row-span-1 col-span-3 bg-gray-400">
      Aside...
    </aside>

    <aside class="row-span-2 col-span-3 bg-gray-400">
      Aside...
    </aside>
  </div>