why is the main bar column in bootstrap not taking the full width?

Question

I have created a simple row which has two child columns the sidebar column with className='col-md-2' and the mainbar column with className='col-md-10'. The parent row class has a display:flex to style the two childs side-by-side.

<div style={{display:'flex'}} className='row'>
<div className='sidebar col-md-2'>
</div>
<div className='mainbar container-fluid border col-md-10' >
Home
</div>
</div> 

Eventhough the column numbers are adding up to 12, the mainbar column is not taking the supposed full width.

I am expecting that the mainbar column occupy the remaining full width of the screen

Answer 1

I found the answer to my question. I have to add g-0 bootstrap class to the row class to remove the gutter.