Filling Extra Space in HTML/CSS

Question

How do I fill that circled space? I want to know how to fill the rest of the blue area with white background-color.

I tried increasing the padding, but that moved the price lower and lower and to the left a little each time I increased the padding.

My HTML looks like this..

section {
  background-color: white;
}

#repair-tagline h1 {
  background-color: white;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 0.2rem;
  font-size: 3rem;
  text-align: center;
  padding: 40px 0 40px 0;
}

.repair-option {
  background-color: rgb(0, 0, 77);
  width: 80%;
  padding: 50px 50px 50px 50px;
  margin: 0px auto 50px auto;
}

.repair-type,
.repair-price {
  display: inline-block;
  color: white;
}

.repair-type {
  font-size: 2rem;
}

.repair-price {
  float: right;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-size: 2rem;
}

<section>
  <div class="repair">
    <div id="repair-tagline">
      <h1>Choose Your Vacuum Cleaner Repair Option:</h1>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Belt Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$10.00</h1>
      </div>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Brush-Roll Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$20.00</h1>
      </div>
    </div>
  </div>
</section>

Answer 1

Remove the padding from the class of repair-option and add individual paddings to the 2 child divs (repair-type and repair-price). That way, each of those had individual paddings which means the background-color corresponds to the div.

The padding for .repair-price may look weird, but I just did that because it wasn't lining up. You can change all the paddings to how you wish.

section {
  background-color: white;
}

#repair-tagline h1 {
  background-color: white;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 0.2rem;
  font-size: 3rem;
  text-align: center;
  padding: 40px 0 40px 0;
}

.repair-option {
  background-color: rgb(0, 0, 77);
  width: 80%;
  padding: 0px;
  margin: 0px auto 50px auto;
}

.repair-type,
.repair-price {
  display: inline-block;
  color: white;
}

.repair-type {
  font-size: 2rem;
  padding: 10px;
}

.repair-price {
  float: right;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-size: 2rem;
  padding: 10px 0px 8px 0px;
}

<section>
  <div class="repair">
    <div id="repair-tagline">
      <h1>Choose Your Vacuum Cleaner Repair Option:</h1>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Belt Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$10.00</h1>
      </div>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Brush-Roll Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$20.00</h1>
      </div>
    </div>
  </div>
</section>