I want to sidenavigation to have margin al around but when i do this the sidebar goes out of the screen at the bottom.

import React from "react";
import { MdOutlineDateRange } from "react-icons/md";
import { LuListTodo } from "react-icons/lu";

const SideNavigation = () => {
  return (
    <div className="w-28 m-4 box-border">
      <div className="flex flex-col items-center justify-center h-screen p-3 bg-gray-100 rounded-lg shadow-md">
        <div className="flex flex-col items-center my-4">
          <LuListTodo size={24} />
          <span className="text-xs mt-1">To-Do</span>
        </div>
        <div className="flex flex-col items-center my-4">
          <MdOutlineDateRange size={24} />
          <span className="text-xs mt-1">Rooster</span>
        </div>
      </div>
    </div>
  );
};

export default SideNavigation;

enter image description here

i tried everything to my feeling and dont remember everything i tried.