How can i delete width in react - bootstrap class? - reactjs

Question

I'm doing an internet-store, and i have a problem with top panel. I tried everything to fix it, but only when i change class row in dev tools i can get result.
row>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
i need to delete width from this class, but i don't know how to do it. If u can help me, it will be cool.
oh, if i replace component for nothing change.
<Container>
<Row className="mt-2">
<Col md={3}>
<TypeBar />
</Col>
<Col md={9} >
<BrandBar />
<DeviceList />
</Col>
</Row>
</Container>
const BrandBar = observer(() => {
const {device} = useContext(Context);
return (
<Row className="d-flex">
{device.brands.map(brand =>
<Card
style={{cursor: 'pointer'}}
key={brand.id}
className='p-2 align-items-center'
onClick={() => device.setSelectedBrand(brand)}
border={brand.id === device.selectedBrand.id ? 'danger' : 'light'}
>
{brand.name}
</Card>
)}
</Row>
)
})

Answer 1

When using bootstrap's containers always follows the Container > Row > Col order.
The class row>* is intended to select the cols, but instead is selecting your card.
Try doing like so
const BrandBar = observer(() => {
const { device } = useContext(Context);
return (
//Add a Container here
<Container>
<Row className="d-flex">
{device.brands.map((brand) => (
//Add a Col here
<Col>
<Card
style={{ cursor: 'pointer' }}
key={brand.id}
className="p-2 align-items-center"
onClick={() => device.setSelectedBrand(brand)}
border={brand.id === device.selectedBrand.id ? 'danger' : 'light'}
>
{brand.name}
</Card>
</Col>
))}
</Row>
</Container>
);
});