Why is the blue padding over the red one?

Hi, I just started learning CSS and don’t understand why the blue padding and the border of the blue box is a little over the red padding and the border of the red box with this code, I would appreciate it if someone could explain this to me.
Here is an image of what I’m talking about:


This is the challenge I’m in, as you can see, I solved the challenge but am confused about this.

Code:

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
    margin: -15px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: -15px;
  }
</style>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>
 

To make it clearer, what would make the red box be over the blue one?

Hi!!!, This happened because your .red-box and .blue-box have margin: -15px