html – find out how to resolve overlap content material downside with dropdown taildwind css?

As per the picture, the nav dropdown is overlapping physique content material how can I resolve this

I’m including the navigation code in addition to content material

navigation code :

     <div class="dropdown relative">
      <a category="dropdown-toggle flex items-center hidden-arrow" href="#" 
          id="dropdownMenuButton2" position="button"
        data-bs-toggle="dropdown" aria-expanded="false">

        <span class="seen md:invisible md:hidden lg:invisible lg:hidden
         py-4 px-2 text-black">

         emblem
        </span>
      </a>
      <ul class=" dropdown-menu min-w-max absolute hidden  bg-white  text-base
       z-10 float-left  py-2 list-none text-left  rounded-lg  shadow-lg mt-1
       hidden m-0   bg-clip-padding left-auto right-0" aria- 
       labelledby="dropdownMenuButton2">
        <li>
          <a category="dropdown-item text-sm py-2 px-4 font-normal 
             block w-full whitespace-nowrap
              bg-transparent text-gray-700 hover:bg-gray-100" 
             href="{{route('residence')}}">Residence</a>
        </li>
      
        <li>
          <a category="dropdown-item text-sm py-2 px-4 font-normal
                    block w-full whitespace-nowrap
                    bg-transparent text-gray-700 hover:bg-gray-100"  
             href="{{route('contactUs')}}">Contact Us</a>
        </li>
      </ul>
    </div>