What is causing the body of my sidebar to go outside the border ? The body is not supposed to overflow like that, it's supposed to end where the border starts. Also another weird thing i am noticing is that the body doesn't have rounded corners, looks like they're two separate elemements somehow.

Here is the code:

// Client-side directive
'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation'; // Updated import

// SidebarItem Component
const SidebarItem: React.FC<{ href: string, icon: JSX.Element, label: string }> = ({ href, icon, label }) => {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <Link href={href}>
      <div className={`flex items-center mb-9 p-3 text-xl rounded cursor-pointer`} style={{ fontFamily: 'Roboto', color: '#646363' }}>
        <div className="flex items-center justify-center mr-3" style={{ width: '54px', height: '54px', backgroundColor: '#F8F8F8', borderRadius: '6px' }}>
          {React.cloneElement(icon, { style: { maxWidth: '32px', maxHeight: '32px' } })}
        </div>
        <span>{label}</span>
      </div>
    </Link>
  );
};

const JobSeekerSidebar: React.FC = () => {
  return (
    <div style={{ padding: '24px', backgroundColor: '#FFFDFD', boxSizing: 'border-box', minHeight: '100vh' }}>
      <div style={{ borderRadius: '12px', border: '1px solid #B7B7B7', backgroundColor: '#FFFDFD', padding: '24px', boxSizing: 'border-box' }}>

If someone could help me fix that I'd appreciate.