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