React- bootstrap поле формы, вызывающее переполнение

Question

Я только что начал реагировать- bootstrap сегодня. Я хочу, чтобы форма была в div с полями слева и справа. Мой jsx выглядит так:

const Settings = () =>{
   return(
            <div className="content">
                <div className="box">

                    {/* Actual form with course info */}
                    <Form className="course-info">
                        <Form.Group as={Row} controlId="formHorizontalEmail">
                            <Form.Label variant="settingsLabel" column sm={3}>
                                Course Title
                            </Form.Label>
                            <Col sm={5}>
                                <Form.Control/>
                            </Col>
                        </Form.Group>
                    </Form>

                </div>
           </div>
   );
}

CSS:

/* A big wrapper for everything on this page */
.content{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The box containing the class settings */
.box {
    width: 600px;
    height: 600px;
    border: 30px solid #A6D1DF;
    margin-top:50px;
}

.center-items{
    margin-top: 1em;
    text-align: center;
}

/* Gives the form left/right margin and sets text color */
.course-info {
    padding-left: 20px;
    color: #9E7772;
}

Form.Label-settingsLabel {
    font-size: 1em;
    color: red;
}

И содержимое формы выходит за пределы правой части поля, и удаление поля устраняет проблему. Однако мне все еще нужен этот запас для стилизации. Какие-либо предложения? Спасибо