Tailwind: can't get the elements to fill the width - css

Question

Fiddle: https://play.tailwindcss.com/epT13JJxnk
It looks like this:
I need it to look like this:
How do I achieve it?
Fiddle code:
<div id="app" class=" border border-white
h-screen font-sans tracking-normal mt-10">
<nav data-v-5e628c52="" class="pt-2 md:pt-1
pb-1 px-1 mt-0 h-auto
fixed w-full z-20 top-0">
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-between
m-3 p-2 pl-6 ">
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-start"><a data-v-5e628c52="" href="#" class="header-item title-text light-text text-xl router-link-exact-active router-link-active" aria-current="page">Link1 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link2 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link3 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link4 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link5 </a></div>
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-end ">
<!----><!---->
<div data-v-5e628c52="">
<div data-v-24cf0f3c="" data-v-5e628c52="">
<div data-v-24cf0f3c="" class=" ">
<div data-v-24cf0f3c="" class="dropdown inline-block relative">
<button data-v-24cf0f3c=""><img data-v-24cf0f3c="" src="/img/some-image.png" class=" rounded-full border
border-gray-100 shadow-sm w-12
"></button>
<ul data-v-24cf0f3c="" class="right-0 dropdown-menu absolute hidden text-gray-800 pt-1">
<li data-v-24cf0f3c="" class=""><a data-v-24cf0f3c="" href="/user/test" class="rounded-t
py-2 px-4 block whitespace-no-wrap">Profile</a></li>
<li data-v-24cf0f3c=""><a data-v-24cf0f3c="" href="#" class="
py-2 px-4 block whitespace-no-wrap">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="main-content" class=" border border-red flex justify-center
flex-col items-center space-between min-h-screen w-full
mt-12 md:mt-12 pb-24 md:pb-5 p-5">
<div>
<div data-v-e33ade5c="" class=" ">
<div data-v-87eacdd8="" data-v-e33ade5c="" class="w-full shadow-xl rounded-sm
p-10 pb-5 m-10 pt-5 article flex flex-col
content-between flex-1 flex-grow " name="46">
<div data-v-87eacdd8="" class="flex flex-row justify-between">
<div data-v-87eacdd8="" class="cursor-pointer title-text article-title">last article</div>
<div data-v-87eacdd8="" class="article-date">4/22/2021</div>
</div>
<div data-v-87eacdd8="" class="pt-5 article-text ">last article</div>
<div data-v-87eacdd8="" class="flex flex-wrap mt-5 mb-2 ">
<div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="last" class="inline-flex mr-2 ">
<div data-v-09e62cea="" class="tag rounded-full p-2 "> last</div>
</div>
<div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="yes" class="inline-flex mr-2 ">
<div data-v-09e62cea="" class="tag rounded-full p-2 "> yes</div>
</div>
</div>
<div data-v-87eacdd8="" class=" font-bold light-text "> Comments: 0 </div>
<!---->
</div>
</div>
</div>
<div id="up-button" class=" sticky text-xl cursor-pointer
mt-auto ml-auto
bottom-5 right-5 rounded-lg p-5 "> UP </div>
</div>
<footer></footer>
</div>
EIDT:
I tried to add an extra wrapper with w-full as the answer suggests, but now the child div (gray) is too huge and goes outside the outer div id="app" (yellow). Also the UP button breaks: it's no longer small, but is very wide:
https://play.tailwindcss.com/8XBRUdNaX2

Answer 1

Change items-center to items-stretch on #main-content.
Remove w-full from the item div[name=46]
See example: https://play.tailwindcss.com/TZQHATbdll

Answer 2

Just need to add class to a div. Also, adjust some paddings and you are good to go.
<div id="main-content">
<div class="w-full">

Answer 3

The wrapper div needs a w-full class, too (as #Digvijay already pointed out). Then, some classes of the name="46" element must be removed, especially w-full, which applies a 100% width that is added to the padding defined on the element, adding up to more than 100%.
See the updated example: https://play.tailwindcss.com/1vDd7ToPLt

Answer 4

Remove items-center class from <div id="main-content">
Remove m-10 from <div class="" name="46">
Link