在child-div中设置父div填充的背景颜色

Question

正如你在图片中看到的那样，我想要绘制灰色部分。确切地说，我想通过设置div的背景颜色来绘制具有该灰色的父级填充。

使用css甚至可以做些什么吗？

我的HTML看起来像这样：

<div class="card">
  <div class="card-body text-center">
    <div class="row">
      <div class="col-sm-5 d-flex align-items-center justify-content-center">
        <div>
          <img/>
          </p>
        </div>
      </div>
      <div class="col-sm-2 d-flex align-items-center justify-content-center">
        <p class="no-margin">vs</p>
      </div>
      <div class="col-sm-5 d-flex align-items-center justify-content-center">
        <div>
          <img/>
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="margin-top">
          </p>
          </p>
        </div>
      </div>
    </div>
    <div class="row bet-section">
      <div class="col-md-12">
        <div class="">
          <p class="no-margin">This section should be painted</p>
        </div>
      </div>
    </div>

  </div>
</div>

父div的相应填充来自：

.card .card-body {
    padding: 0.9375rem 20px;
    position: relative;
}

我的下注课看起来就像现在这样，也许我应该在这里改变一些东西？

.bet-section{
  background-color: lightgrey;
}

Answer 1

`<div class="row bet-section">
  <div class="col-md-12 newclass">
    <div class="">
      <p class="no-margin">This section should be painted</p>
    </div>
  </div>
</div>`

.bet-section .newclass{
  background-color: lightgrey;
  }