<div> не использует полное пространство столбца начальной загрузки

Я пытаюсь заставить три кнопки использовать всю ширину столбца.

Сетка 3 для кнопок и 9 для остальных компонентов.

Вот визуальный. Таким образом, кнопки также должны занимать пространство, отмеченное красным, они должны просто использовать весь столбец из 3.

Вот App.js, куда я импортировал компонент:

<div className = "container-full padding-0" style = {{overflow:'hidden', overflowY:'hidden'}}>
    <div className = "row">
        <div className = "col-sm-3" style = {{borderRight:"1px solid #000"}}>
            <div className = "row no-gutters mt-auto">
                <div className = "col-sm-3">
                    <COMPONENT1/>
                </div>
                <div className = "col-sm-9">
                    <COMPONENT2/>
                </div>
            </div>
            <COMPONENT3 store = {store} style = {{overflow:'hidden'}}/>
            <COMPONENT4/>
            <BUTTONS/> --------------------------> Here are the buttons
       </div>
       <div className = "col-sm-9" style = {{paddingRight: 0, paddingLeft: 0}}>
            <COMPONENT6 = {store} style = {{overflow:'hidden'}}/>
            <br/>
            <COMPONENT7/>
            <COMPONENT8 store = {store} clicked = {this.clicked}/>
       </div>
    </div>
</div>

И компонент кнопок:

<div className = "row no-gutters mt-auto" style = {{paddingTop:10}}>
    <div className = "col-sm-4">
        <Button variant = "raised" style = {buttonStyle}>A</Button>
    </div>

    <div className = "col-sm-4">
        <Button variant = "raised" style = {buttonStyle}>B</Button>   
    </div>

    <div className = "col-sm-4">
        <Button variant = "raised" style = {buttonStyle}>C</Button>
    </div>
</div>

И CSS для кнопок:

const buttonStyle = {
    fontSize: 20,
    textAlign: 'center',
    display:'inline-block',
    width:'100%',
    height:100
}

Обновлено: Вот быстрый рис пользовательского интерфейса