Recharts not covering the 100% width of div

Question

I am trying to add a line chart in my page using recharts but the problem is that it is not taking the 100% width of the div I placed it in, I checked this by applying border and can see the 100% width, but the chart is not covering it up here my code and picture:- (this is just a component named dashboard the same page has another component leftbar too)

JSX :-

import React from 'react'
import dashboardcss from './Dashboard.module.css'
import {
  LineChart,
  ResponsiveContainer,
  Legend, Tooltip,
  Line,
  XAxis,
  YAxis,
  CartesianGrid
} from 'recharts';

// Sample chart data
const pdata = [
  {
      name: 'MongoDb',
      student: 11,
  },
  {
      name: 'Javascript',
      student: 15,
  },
  {
      name: 'PHP',
      student: 5,
  },
  {
      name: 'Java',
      student: 10,
  },
  {
      name: 'C#',
      student: 9,
  },
  {
      name: 'C++',
      student: 10,
  },
];

export default function Dashboard() {
  
  return (
    <div className={dashboardcss.main}>
      <div className={dashboardcss.top}>
        <div className={dashboardcss.top_parts} id={dashboardcss.title}>
          DASHBOARD
        </div>
        <div className={dashboardcss.top_parts} id={dashboardcss.small_heading}>
          <h4><b>Sales</b> Overview</h4>
        </div>
        <div className={dashboardcss.top_parts} id={dashboardcss.chart}>
            <ResponsiveContainer width="100%" height="100%" aspect={3.5}>
                <LineChart data={pdata} margin={{ right: 300 }}>
                    <CartesianGrid  strokeDasharray='10 10'  vertical=''/>
                    <XAxis dy={30}  dataKey="name" 
                        axisLine={false}
                        interval={'preserveStartEnd'}/>
                    <YAxis dx={-25} axisLine={false} />
                    <Legend/>
                    <Tooltip />
                    <Line type='monotone' dataKey="student"
                        stroke="#6831D3" strokeWidth={3} activeDot={{ r: 8 }} />

                </LineChart>
            </ResponsiveContainer>
        </div>

      </div>
      <div className={dashboardcss.mid}>mid</div>
      <div className={dashboardcss.bottom}>bottom</div>
    </div>
  )
}

CSS :-

.main{
    margin-left: 2%;
    margin-top: 2%;
    font-family: 'Sora', sans-serif;
    width: 80%;
}


.top{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70%;
}

.top_parts{
    margin-bottom: .5%;
}

#title{
    color: #AEADC2;
}

#chart{
    width: 100%;
    height: 100%;
    border: 2px solid black;   
}