How to darken on hover all section

Question

please give me a hand and explain how can I darken on hover all section.The code given below hovers only a section within a section where its written text but I would like all section to be darken.

index:

  <section class="promo">
    <div class="overlay">
      <div class="container-fluid">
        <div class="text-center col-md-12">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </section>

css:

    .promo {
    background-color: rgb(52, 132, 172);
    color: white;
    font-weight: 700;
    line-height: 200%;
    text-align: center;
    padding: 50px;
}

.promo:hover > .overlay {
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.5;
}

Answer 1

try adding the padding into the overlay section instead.

  <section class="promo">
    <div class="overlay">
      <div class="container-fluid">
        <div class="text-center col-md-12">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </section>

Css:

 .promo {
    background-color: rgb(52, 132, 172);
    color: white;
    font-weight: 700;
    line-height: 200%;
    text-align: center;
}

.promo > .overlay {
  padding: 50px;
}
.promo:hover > .overlay {
    background-color:#000;
    opacity:0.5;
}

codepen