在另一个div之外的div

Question

我的代码有问题。我想把.calories，.proteins，.fats和.hydrates放在.progress中，但是，它们会在外面出去。我绘制边框以便更好地看到它。有人可以帮帮我吗？ ：（

HTML：

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
  <div class="progress hidden">
    <div class="calories"></div>
    <div class="proteins"></div>
    <div class="fats"></div>
    <div class="hydrates"></div>
  </div>
</div>

的CSS：

.calories, .proteins, .fats, .hydrates {
  height: 50px;
  background: green;
  margin-bottom: 16px;
  margin-top: 16px;
  margin-left: 40px;
  padding-left: 10px;
  padding-top: 15px;
  text-align: left;
  color: white;
}

.col-xl-6 {
  border: 2px solid red;
}

.progress {
  border: 2px solid blue;
}

As you see it on the screen