Невозможно переместить карту с верхней ширины

Я использую Tailwind (flowbite) для создания внешнего интерфейса моего проекта, но панель навигации перекрывает карту. Я попробовал mt-8, но он не вносит существенных изменений.

какие изменения мне нужно внести, чтобы получить желаемые результаты

Card Code
import React from "react";

const HomeSubHeader = () => {
  return (
    <div class = "max-w-sm p-6 mt-[100px] bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
      <a href = "#">
        <h5 class = "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
          Noteworthy technology acquisitions 2021
        </h5>
      </a>
      <p class = "mb-3 font-normal text-gray-700 dark:text-gray-400">
        Here are the biggest enterprise technology acquisitions of 2021 so far,
        in reverse chronological order.
      </p>
      <a
        href = "#"
        class = "inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      >
        Read more
        <svg
          class = "rtl:rotate-180 w-3.5 h-3.5 ms-2"
          aria-hidden = "true"
          xmlns = "http://www.w3.org/2000/svg"
          fill = "none"
          viewBox = "0 0 14 10"
        >
          <path
            stroke = "currentColor"
            stroke-linecap = "round"
            stroke-linejoin = "round"
            stroke-width = "2"
            d = "M1 5h12m0 0L9 1m4 4L9 9"
          />
        </svg>
      </a><datagrid></datagrid>
    </div>
  );
};

export default HomeSubHeader;

Navbar Code 
import HomeSubHeader from "@/components/HomeSubHeader";
export default function Navbar() {
  return (
    <>
     <nav class = "bg-white dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
      <div class = "max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <a
          href = "https://flowbite.com/"
          class = "flex items-center space-x-3 rtl:space-x-reverse"
        >
          <img
            src = "https://flowbite.com/docs/images/logo.svg"
            class = "h-8"
            alt = "Flowbite Logo"
          />
          <span class = "self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
            Flowbite
          </span>
        </a>
        <div class = "flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
          <button
            type = "button"
            class = "text-white bg-orange-500 hover:bg-orange-600 focus:ring-4 focus:outline-none focus:ring-orange-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-orange-400 dark:hover:bg-orange-500 dark:focus:ring-orange-600"
          >
            Sign In
          </button>
          <button
            data-collapse-toggle = "navbar-sticky"
            type = "button"
            class = "inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
            aria-controls = "navbar-sticky"
            aria-expanded = "false"
          ></button>
        </div>

        <div
          class = "items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
          id = "navbar-sticky"
        >
          <ul class = "flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
            <li>
              <a
                href = "#"
                class = "block py-3 px5 text-orange-500 bg-orange-700 rounded md:bg-transparent md:text-orange-500 md:p-0 md:dark:text-blue-500"
                aria-current = "page"
              >
                Home
              </a>
            </li>
            <li>
              <a
                href = "#"
                class = "block py-3 px5 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
              >
                About Us
              </a>
            </li>
            <li>
              <a
                href = "#"
                class = "block py-3 px5 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
              >
                Blogs
              </a>
            </li>
            <li>
              <a
                href = "#"
                class = "block py-3 px5 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
              >
                Pricing
              </a>
            </li>
            <li>
              <a
                href = "#"
                class = "block py-3 px5 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
              >
                Contact Us
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <HomeSubHeader/>
   </>
  );
}

Я хотел разместить код под навигационной панелью с надлежащей реакцией, но я стараюсь, но это не вносит существенных изменений.