Spacing in Tailwindcss

Im fairly new to web development and especially Tailwindcss, im trying to get my footer navigation to float right but Im not able to get it to work.

Tried "gap-96" "space-x-96" "mr-96" "float-right" in diffrent places of the code.

My footer

      <footer className="bg-zinc-950 h-44 pl-20 pt-14">
      <Link href={'#'}>
        <Image className="mb-10" src="/lipologo.svg" alt="Lipo Logo" width={70} height={70}/>
        </Link>
        <div className="flex space-x-96">
          <h3 className="text-xs">© 2024 Lipo Creatives</h3>
            <div className="space-x-4 text-xs flex float-right">
              <a href="#"><p>Home</p></a>
              <a href="#portfolio"><p>Portfolio</p></a>
              <a href="#about"><p>About</p></a>
              <a href="#contact"><p>Contact</p></a>
            </div>
        </div>
      </footer>

Method 1: Use justify-between (only effective when the flex container has two child elements).

<script src="https://cdn.tailwindcss.com"></script>

<footer class="bg-zinc-950 text-white px-20 pt-14">
  <div class="flex justify-between">
    <h3 class="text-xs">© 2024 Lipo Creatives</h3>
    <div class="flex space-x-4 text-xs">
      <a href="#"><p>Home</p></a>
      <a href="#portfolio"><p>Portfolio</p></a>
      <a href="#about"><p>About</p></a>
      <a href="#contact"><p>Contact</p></a>
    </div>
  </div>
</footer>

Method 2: Apply ml-auto directly to the child element you want to align to the right.

<script src="https://cdn.tailwindcss.com"></script>

<footer class="bg-zinc-950 px-20 pt-14 text-white">
  <div class="flex">
    <h3 class="text-xs">© 2024 Lipo Creatives</h3>
    <div class="ml-auto flex space-x-4 text-xs">
      <a href="#"><p>Home</p></a>
      <a href="#portfolio"><p>Portfolio</p></a>
      <a href="#about"><p>About</p></a>
      <a href="#contact"><p>Contact</p></a>
    </div>
  </div>
</footer>