Контейнер ReactJS не занимает всю строку

У меня есть приложение reactJS, в котором я отображаю заголовок в верхней части представления, а затем некоторый текст под заголовком. Я использую этот код для создания представления:

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>
    )
}

И у меня есть следующее в моей таблице стилей:

.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;
}

Вот что отображается в представлении:

Если вы заметили, слева и справа есть пробелы. Мне не удалось заставить синий фон заголовка занимать весь вид, и мне не удалось заставить бежевый фон занять весь вид.

Любые предложения будут ценны.