Как исправить проблему с наложением слоев с помощью ::After

Я пытаюсь создать вид сложенной коробки, используя ::after. Я создал код в кодовой ручке (https://codepen.io/nk-creative/pen/vqvVJL), но когда я размещаю код на сайте Wordpress, над которым работаю, я не могу добиться такого же эффекта стекирования в том же порядке (http://aptw.nk-creative.com/)

Я создал код в codepen (https://codepen.io/nk-creative/pen/vqvVJL).

<div class = "offset-boxes">
  <h4>47 Locations & Personalized Plans. Meet Your New Partner.</h4>
</div>


.offset-boxes {
    position: relative;
    max-width: 300px;
    height: 290px;
    background-color: lightpink;
  margin-top: 20px;
  padding: 25px
}

.offset-boxes::after {
    content: "";
    width: 100%;
  right: -40px;
  top: -40px;
    height: 100%;
    background-color: red;
    position: absolute;
    z-index: -1; 
}

Я ожидал, что код будет выглядеть как codepen, но сайт WP — нет.