title: Random Blank Space is showing up after putting two divs inside one div and then using justify content
body: <p>I am making a website using the Next.js framework for React and Tailwind Css for markup and am getting this annoying problem. Basically I am trying to put my image onto the right side while having my text on the left but it just won't work properly and when I try putting the heading and subheading divs into one separate div inside body, the entire navbar gets really wonky.</p>
  <p><strong>Code Before Extra Div</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Head from 'next/head'
  import Avatar from '../components/Avatar'
  import Image from 'next/image'
  
  export default function Home() {
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Vasu Bansal&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;logo.png&quot; /&gt;
        &lt;/Head&gt;
  
        {/* Navbar */}
  
        &lt;header className=&quot;flex w-full p-5 justify-between text-2xl text-white bg-gray-700&quot;&gt;
          &lt;div className=&quot;flex&quot;&gt;
            &lt;Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex items-center&quot;&gt;
            &lt;button className=&quot;btn&quot;&gt;Meet Vasu&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button className=&quot;btn&quot;&gt;The Blog&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button className=&quot;btn&quot;&gt;Other&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' /&gt; 
          &lt;/div&gt;
  
        &lt;/header&gt;
  
        &lt;body className=&quot;flex flex-wrap w-full bg-gray-500 bg-cover justify-between&quot;&gt;
  
          &lt;div className=&quot;flex text-center mt-32 md:ml-40 md:pt-16&quot;&gt;
            &lt;h1 className=&quot;flex text-white text-5xl font-extrabold&quot;&gt;My Name is Vasu Bansal&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex text-center flex-nowrap w-full md:pl-40 md:pt-5&quot;&gt;
            &lt;h1 className=&quot;flex text-white text-xl &quot;&gt;I am an experienced programmer who knows multiple languages&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex flex-col&quot;&gt;
            &lt;img src=&quot;computer.png&quot; width={400} height={400}/&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p><strong>Picture Before Extra Div</strong></p>
  <p><a href="https://i.stack.imgur.com/Ov4qP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ov4qP.jpg" alt="Picture of website before" /></a></p>
  <p>Now for after the extra div</p>
  <p><strong>Code</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Head from 'next/head'
  import Avatar from '../components/Avatar'
  import Image from 'next/image'
  
  export default function Home() {
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Vasu Bansal&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;logo.png&quot; /&gt;
        &lt;/Head&gt;
  
        {/* Navbar */}
  
        &lt;header className=&quot;flex w-full p-5 justify-between text-2xl text-white bg-gray-700&quot;&gt;
          &lt;div className=&quot;flex&quot;&gt;
            &lt;Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex items-center&quot;&gt;
            &lt;button className=&quot;btn&quot;&gt;Meet Vasu&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button className=&quot;btn&quot;&gt;The Blog&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button className=&quot;btn&quot;&gt;Other&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;Avatar url='https://www.flaticon.com/svg/vstatic/svg/984/984145.svg?token=exp=1618262680~hmac=532b7dc5441907b92c5bcef8e971d042' /&gt; 
          &lt;/div&gt;
  
        &lt;/header&gt;
  
        &lt;body className=&quot;flex flex-wrap w-full bg-gray-500 bg-cover justify-between&quot;&gt;
          &lt;div&gt;
            &lt;div className=&quot;flex text-center mt-32 md:ml-40 md:pt-16&quot;&gt;
              &lt;h1 className=&quot;flex text-white text-5xl font-extrabold&quot;&gt;My Name is Vasu Bansal&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div className=&quot;flex text-center flex-nowrap w-full md:pl-40 md:pt-5&quot;&gt;
              &lt;h1 className=&quot;flex text-white text-xl &quot;&gt;I am an experienced programmer who knows multiple languages&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex flex-col&quot;&gt;
            &lt;img src=&quot;computer.png&quot; width={400} height={400}/&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p><strong>Picture</strong></p>
  <p><a href="https://i.stack.imgur.com/78Xfo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/78Xfo.jpg" alt="Image of website after extra div" /></a></p>
  <p>Any help would be greatly appreciated. You could either help by telling how to fix problem or tell me how to put the image on right with text on left. Thanks in advance!/</p>