Tailwind css Мой контакт раздел застрял в середине раздела портфолио на мобильном телефоне

Question

На рабочем столе сайт загружается нормально, как обычно, однако по какой-то причине на мобильном сайте раздел контактов странным образом застрял в середине всех изображений портфолио. Изображение ссылается на скриншот ошибки. https://imgur.com/a/tyYv2kx Появляется в нескольких браузерах и в реальных iPhone. Любая идея, как сделать так, чтобы раздел контактов отображался под разделом портфолио, как это делается на сайте рабочего стола?

  <section id='portfolio' class="bg-white py-8 h-screen">
     <div class="container mx-auto flex items-center flex-wrap py-10" data-aos="zoom-in" data-aos-duration="800">
        <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3" data-aos="fade-right" data-aos-duration="800">
           <a class="skills uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 mt-8 text-xl " href="#">
           <h2>Portfolio</h2>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img onclick='openModal()' class="hover:grow hover:shadow-lg" src="vv.png" style='width: 340px; height: 270px;'>
              <div class="pt-3 flex items-center justify-between">
                 <p>Vice Versa Site</p>
              </div>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img class="hover:grow hover:shadow-lg" src="place.png">
              <div class="pt-3 flex items-center justify-between">
                 <p>Item Name</p>
              </div>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img class="hover:grow hover:shadow-lg" src="place.png">
              <div class="pt-3 flex items-center justify-between">
                 <p>Item Name</p>
              </div>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img class="hover:grow hover:shadow-lg" src="place.png">
              <div class="pt-3 flex items-center justify-between">
                 <p>Item Name</p>
              </div>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img class="hover:grow hover:shadow-lg" src="place.png">
              <div class="pt-3 flex items-center justify-between">
                 <p>Item Name</p>
              </div>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img class="hover:grow hover:shadow-lg" src="place.png">
              <div class="pt-3 flex items-center justify-between">
                 <p>Item Name</p>
              </div>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img class="hover:grow hover:shadow-lg" src="place.png">
              <div class="pt-3 flex items-center justify-between">
                 <p>Item Name</p>
              </div>
           </a>
        </div>
        <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
           <a href="#">
              <img class="hover:grow hover:shadow-lg" src="place.png">
              <div class="pt-3 flex items-center justify-between">
                 <p>Item Name</p>
              </div>
           </a>
        </div>
     </div>
     <a name='contact'></a>
  </section>
  <section id='contact' class='bg-gray-200 h-1/2'>
     <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12">
        <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3">
           <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#">
           <h2>Contact</h2>
           </a>
        </div>
        <div class="mx-auto text-center max-w-4xl  flex flex-col my-2" data-aos="flip-down"  data-aos-duration="800">
           <div class="-mx-3 md:flex mb-6">
              <div class="md:w-1/2 px-3 mb-6 md:mb-0">
                 <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3 focus:outline-none focus:bg-white focus:border-orange-500" id="grid-name" type="text" placeholder="Name">
              </div>
              <div class="md:w-1/2 px-3">
                 <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 focus:outline-none focus:bg-white focus:border-orange-500" id="grid-email" type="email" placeholder="Email">
              </div>
           </div>
           <div class="-mx-3 md:flex mb-6">
              <div class="md:w-full px-3">
                 <textarea class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3 focus:outline-none focus:bg-white focus:border-orange-500" id="grid-message" type="message" placeholder="Type your message here..."></textarea>
              </div>
           </div>
           <div class="-mx-3 md:flex mb-6">
              <div class="md:w-2xl mx-auto px-3">
                 <input type='submit' value="Submit" class="block w-full bg-blue-600 border rounded hover:bg-yellow-400 hover:border-transparent cursor-pointer py-3 px-4" id="grid-last-name" type="email" placeholder="Doe">
              </div>
           </div>
        </div>
     </div>
  </section>