How to fix this? Problem in style in react js - css

Question

enter image description here
How can i fix this problem. I don't know i try search this problem in google but i don't find solution. And it's very important for me. I try put children like props but it's not working please help me
my sidebar component.
import React, { Children, useState } from "react";
import {
ProSidebar,
Menu,
MenuItem,
SidebarHeader,
SidebarContent,
} from "react-pro-sidebar";
import { FaList, FaRegHeart, FaTh } from "react-icons/fa";
import { FiHome, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";
import { RiPencilLine } from "react-icons/ri";
import { BiCog } from "react-icons/bi";
import "react-pro-sidebar/dist/css/styles.css";
import "./Header.css";
import { Link } from "react-router-dom";
import {pathEdebiyat, pathChemistry, pathEnglish, pathGeography, pathMath, pathPhysics } from "../../Router";
const Header = ({children}) => {
const [menuCollapse, setMenuCollapse] = useState(false);
const menuIconClick = () => {
menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
};
return (
<>
<div id="header">
{/* collapsed props to change menu size using menucollapse state */}
<ProSidebar collapsed={menuCollapse}>
<SidebarHeader>
<div className="logotext">
<p>{menuCollapse ? "Logo" : "Big Logo"}</p>
</div>
<div className="closemenu" onClick={menuIconClick}>
{menuCollapse ? <FiArrowRightCircle /> : <FiArrowLeftCircle />}
</div>
</SidebarHeader>
<SidebarContent>
<Menu iconShape="square">
<MenuItem active={window.location.pathname === pathEdebiyat} icon={<FiHome />}>
Edebiyat
<Link to={pathEdebiyat}/>
</MenuItem>
<MenuItem icon={<FaList />} active={window.location.pathname === pathMath}>Matematika <Link to={pathMath}/></MenuItem>
<MenuItem icon={<FaRegHeart />}>Turkmen dili</MenuItem>
<MenuItem icon={<RiPencilLine />}>Himiya</MenuItem>
<MenuItem icon={<BiCog />}>Rus DIli</MenuItem>
</Menu>
</SidebarContent>
</ProSidebar>
<main>{children}</main>
</div>
</>
);
};
export default Header;
sidebar styles. I try to use overflow but it isn't help me. And i don't know how i can solve this
#header {
position: absolute;
width: 220px;
}
#header .pro-sidebar {
height: 100vh;
}
#header .closemenu {
color: #000;
position: absolute;
right: 0;
z-index: 9999;
line-height: 20px;
border-radius: 50%;
font-weight: bold;
font-size: 22px;
top: 35px;
cursor: pointer;
}
#header .pro-sidebar {
width: 100%;
min-width: 100%;
}
#header .pro-sidebar.collapsed {
width: 80px;
min-width: 80px;
}
#header .pro-sidebar-inner {
background-color: white;
box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
}
#header .pro-sidebar-inner .pro-sidebar-layout {
overflow-y: hidden;
}
#header .pro-sidebar-inner .pro-sidebar-layout .logotext p {
font-size: 20px;
padding: 0 20px;
color: #000;
font-weight: bold;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul {
padding: 0 5px;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
color: #000;
margin: 10px 0px;
font-weight: bold;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
background-color: #fbf4cd;
color: #000;
border-radius: 3px;
}
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
color: #000;
}
#header .pro-sidebar-inner .pro-sidebar-layout .active {
background-image: linear-gradient(0deg, #fece00 0%, #ffe172 100%);
}
#header .logo {
padding: 20px;
}
main {
width: 100%;
padding: 20px;
}
#media only screen and (max-width: 720px) {
html {
overflow: hidden;
}
}
my router component. Router.jsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Chemistry from "./components/Chemistry";
import Edebiyat from "./components/Edebiyat";
import English from "./components/English";
import Geography from "./components/Geography";
import Header from "./components/Header/Header";
import Math from "./components/Math";
import Physics from "./components/Physics";
export const pathMath = "/Math";
export const pathPhysics = "/Physics";
export const pathEnglish = "/English";
export const pathGeography = "/Geography";
export const pathChemistry = "/Chemistry";
export const initialPage = "/";
export const pathEdebiyat = "/Edebiyat";
export default function Router() {
return (
<BrowserRouter>
<Routes>
<Route path={pathEdebiyat} element={<Edebiyat />} />
<Route path={pathMath} element={<Math />} />
<Route path={pathChemistry} element={<Chemistry />} />
<Route path={pathPhysics} element={<Physics />} />
<Route path={pathEnglish} element={<English />} />
<Route path={pathGeography} element={<Geography />} />
</Routes>
</BrowserRouter>
);
}