I want to eliminate the blank area under the container in bootstrap - css

Question

I want to expand the box_switch (red frame part) part of the image below to Top
and apply background color.
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: ０ calc(50% - 50vw) 15px;
width: 100vw;
}
.box_switch {
position: relative;
background: #1E3E75;
padding: 15px;
border-radius: 10px;
margin-bottom: 30px;
margin: ０ calc(50% - 50vw) 15px;
width: 100vw;
}
<div class="container">
<div class="row mx-auto text-center">
<div class="col-12">
<div class="box_switch">
<img class="" src="https://via.placeholder.com/100" />
<p class="under_ic_switch_state">{item.state}</p>
</div>
</div>
</div>
</div>

Answer 1

then i think this will do
body {
margin: 0;
padding: 0;
}
.box_switch {
position: absolute;
left: 0;
top: 0;
background:#1E3E75;
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
margin: ０ calc(50% - 50vw) 15px;
width: 100%;
}
.container {
position: relative;
}

Answer 2

This works
.container {
margin-top: 0 !important;
}