Why does Bootstrap grid system overflow when cols add up to 12? - html

Question

What is happening
What I want
As you can see, the Amy grey box and rectangle grey box are not positioning themselves on the same line. This is strange considering my codes uses the Bootstrap col sys to put both grey boxes on the same row.
My cols add up to 12 so I'm not sure what is happening. I do notice, however, if I make the cols add up to 11, then both grey boxes are put on the same line. But this is not a fix I want as I would like my cols to add up to 12 and have both boxes appear on the same line.
If anyone could help me solve this it would be greatly appreciated!
My code
HTML
<div class="row student-row">
<div class="col-xs-2 student-box">
<h1>Amy</h1>
</div>
<div class="col-xs-10 worksheet-box">
...
</div>
</div>
CSS
.student-row{
margin: 20px 10px 10px 10px;
}
.student-box{
margin-right: 10px;
}
.worksheet-cell{
margin-top: 10px;
margin-left: 10px;
width: 20%;
}
.worksheet-group{
margin: 10px 15px 20px 15px;
}
JSFiddle

Answer 1

You've overridden the margins that Bootstrap set and set your own. Now the box needs more space so it doesn't fit.
Remove those margins and the two boxes fit side by side.
.student-row{
/* margin: 20px 10px 10px 10px;*/
}
.student-box{
background-color: #F5F5F5;
font-weight: 700;
text-transform: uppercase;
/* margin-right: 10px; */
}

Answer 2

Your style is breaking since you are adding the following to your .row element in Bootstrap. If you play with the margin of the row it will break.
.student-box{
margin-right: 10px;
}
I recommend to use the following pattern:
<div class="row student-row">
<div class="col-xs-2 student-box">
<h1>Amy</h1>
</div>
<div class="col-xs-10 worksheet-box">
<!-- Add new elements row wise here -->
<div class="row">
</div>
</div>
</div>