ReactJS container does not take up entire line - reactjs

Question

I have a reactJS application where I display a heading at the top of the view and then some text under the heading. I am using this code to generate the view:
render() {
return (
<div>
<div className="container">
<div className="enrollment_heading_background">
<div className="row">
<div className="col-12 text-center">
<label>Online Enrollment</label>
</div>
</div>
</div>
</div>
<div className="container">
<div className="enrollment_background">
<div className="row">
<div className="col-12 text-center text_15">
<label>Participant Agreement for OnLine Enrollment</label>
</div>
</div>
</div>
</div>
</div>
)
}
And I have the following in my style sheet:
.enrollment_heading_background {
background-color: #b3ccff;
padding-top: 5px;
padding-left: 0px;
padding-right: 0px;
}
.enrollment_background {
background-color: #ffe6b3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
This is what is showing in the view:
If you notice, there is whitespace on the left and on the right. I have been unsuccessful in getting the blue background of the heading to occupy the entire view and I have been unsuccessful in getting the beige background to occupy the entire view.
Any suggestions would be greatly appreciated.

Answer 1

Try:
<div className="enrollment_heading_background">
<div className="container">
<div className="row">
<div className="col-12 text-center">
<label>Online Enrollment</label>
</div>
</div>
</div>
</div>
<div className="enrollment_background">
<div className="container">
<div className="row">
<div className="col-12 text-center text_15">
<label>Participant Agreement for OnLine Enrollment</label>
</div>
</div>
</div>
</div>
The padding from your container is causing the white space. You can still keep the container padding but bring the background divs out so they wrap both containers and keep their 100% width.