Looking at the code in the image, you can see that I am using MUI components. Within a section, there is a box containing navigation filter links. The red part represents the section, while the white inside is the navigation link bar. My goal is for this box to occupy the full width of the section, but I seem to be missing something.
Adding padding or margin has not proven effective. https://i.stack.imgur.com/l6ZcP.png
This is my CSS:
.section-filters {
width: 100%;
position: relative;
}
.sticky-filters {
width: 100%;
position: -webkit-sticky;
position: sticky;
top: 60px;
z-index: 5;
}
This is my React code:
<Section className="section-filters">
<Box className="sticky-filters" mb="10">
<Filters />
</Box>
<ProjectList projects={filtered} />
</Section>
I also attempted changing my code to:
<Section className="section-filters">
<Box sx{{
width:1000,
heigh:100
}}
className="sticky-filters" mb="10">
<Filters />
</Box>
<ProjectList projects={filtered} />
</Section>
With this approach, I achieved more width but only on the right side. As I am not very familiar with MUI components, I am still trying to grasp their functionality.