[SOLVED] Margin pushing sidebar out of the screen

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.

Consider replacing h-screen with h-[calc(100vh-(theme(margin.4)*2))]. This takes the margin into account.

/*** `react-icons` code START **/
const DefaultContext = {
  color: undefined,
  size: undefined,
  className: undefined,
  style: undefined,
  attr: undefined,
};
const iconContext_1 = {
  IconContext: React.createContext && React.createContext(DefaultContext),
};
var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
          t[p[i]] = s[p[i]];
      }
    return t;
  };
function IconBase(props) {
  var elem = function (conf) {
    var attr = props.attr,
      size = props.size,
      title = props.title,
      svgProps = __rest(props, ['attr', 'size', 'title']);
    var computedSize = size || conf.size || '1em';
    var className;
    if (conf.className) className = conf.className;
    if (props.className) className = (className ? className + ' ' : '') + props.className;
    return React.createElement(
      'svg',
      __assign(
        { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0' },
        conf.attr,
        attr,
        svgProps,
        {
          className: className,
          style: __assign(__assign({ color: props.color || conf.color }, conf.style), props.style),
          height: computedSize,
          width: computedSize,
          xmlns: 'http://www.w3.org/2000/svg',
        }
      ),
      title && React.createElement('title', null, title),
      props.children
    );
  };
  return iconContext_1.IconContext !== undefined
    ? React.createElement(iconContext_1.IconContext.Consumer, null, function (conf) {
        return elem(conf);
      })
    : elem(iconContext_1.DefaultContext);
}

function Tree2Element(tree) {
  return (
    tree &&
    tree.map(function (node, i) {
      return React.createElement(
        node.tag,
        __assign({ key: i }, node.attr),
        Tree2Element(node.child)
      );
    })
  );
}
function GenIcon(data) {
  return function (props) {
    return React.createElement(
      IconBase,
      __assign({ attr: __assign({}, data.attr) }, props),
      Tree2Element(data.child)
    );
  };
}

const LuListTodo = function LuListTodo (props) {
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"rect","attr":{"x":"3","y":"5","width":"6","height":"6","rx":"1"},"child":[]},{"tag":"path","attr":{"d":"m3 17 2 2 4-4"},"child":[]},{"tag":"path","attr":{"d":"M13 6h8"},"child":[]},{"tag":"path","attr":{"d":"M13 12h8"},"child":[]},{"tag":"path","attr":{"d":"M13 18h8"},"child":[]}]})(props);
};

const MdOutlineDateRange = function MdOutlineDateRange (props) {
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0V0z"},"child":[]},{"tag":"path","attr":{"d":"M7 11h2v2H7v-2zm14-5v14c0 1.1-.9 2-2 2H5a2 2 0 0 1-2-2l.01-14c0-1.1.88-2 1.99-2h1V2h2v2h8V2h2v2h1c1.1 0 2 .9 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z"},"child":[]}]})(props);
};

const SideNavigation = () => {
  return (
    <div className="w-28 m-4 box-border">
      <div className="flex flex-col items-center justify-center h-[calc(100vh-(theme(margin.4)*2))] 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>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(<SideNavigation/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.4"></script>

<div id="app"></div>