react-bootstrap form margin causing overflow - css

Question

I just got into react-bootstrap today. I want the form to be in a div with margins on left and right side. My jsx looks like this:
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;
}
And the form content overflows the right-hand side of the box, and removing the margin fixes the problem.
However, I still want that margin for styling purposes. Any suggestions? Thanks