bootstarpにてcontainer真下の空白部分をなくしたい

前提

React.jsでBootstrapを使用して
レイアウトを作成しています。

実現したいこと

下記の画像のbox_switch(赤枠部分)部分をTopまで広げて
backgroundカラーを適用させたい

該当のソースコード

React.js

<div className="container"> <div className="row mx-auto text-center"> <> <div className="col-12"> <div className="box_switch"> <img className="" src={plugon_pic} /> <p className="under_ic_switch_state">{item.state}</p> </div> </div> </> </div> </div>

App.css

.box_switch { position: relative; background:#1E3E75; padding:15px; border-radius: 10px; margin-bottom: 30px; margin: 5px calc(50% - 50vw) 15px; width: 100vw; }