Hello !

I have been sent this mockup and the HTML of this container and I am asked to style it.

But I am struggling to put that blue banner behind this container with content, if anyone has an idea of how I can achieve this please help me because I have a close deadline.

Can anyone please help me here?

screenshot

.pj-container {
  background-color: grey;
  padding: 39px;
}

.container {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

.pj {
  $pieces_justificatives: &;
  &--wrapper {
    #{$pieces_justificatives} {
      &__title {
        margin: 0;
        font-size: 24px;
      }
      &__card {
        box-sizing: border-box;
        border: 1px solid #d6d7dc;
        border-radius: 6px;
        background-color: rgba(241, 242, 246, 0.22);
        padding: 18px 24px 20px !important;
      }
      &__list {
        li {
          font-weight: bold;
          counter-increment: mylistcounter;
        }
        li::before {
          background-color: #fddf36;
        }

        span::before {
          display: inline-block;
          content: counter(mylistcounter) " . ";
          margin-right: 5px;
        }
      }
      &__amount {
        color: #02afbc !important;
        font-family: Roboto;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 32px;
        margin-left: 0 !important;
      }
    }
  }
}
<div>
  <div>
    <div class="paragraph-block__block">
      <div class="block">
        <div class="block__content">
          <div class="mt-4 pj-container container">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor morbi non arcu risus quis varius quam. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Cursus sit amet dictum sit amet. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Pharetra pharetra massa massa ultricies mi quis. Nulla pharetra diam sit amet. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Lacus sed turpis tincidunt id aliquet risus feugiat. Dolor morbi non arcu risus. Ac ut consequat semper viverra nam libero justo laoreet sit. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Viverra orci sagittis eu volutpat odio facilisis. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Lacus luctus accumsan tortor posuere.

Aenean pharetra magna ac placerat vestibulum. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Quis varius quam quisque id diam vel. Fusce ut placerat orci nulla pellentesque. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Ac placerat vestibulum lectus mauris ultrices eros. Nulla facilisi morbi tempus iaculis urna id. Amet nisl purus in mollis nunc sed id semper risus. Mattis aliquam faucibus purus in massa tempor nec feugiat. Morbi leo urna molestie at elementum. Faucibus a pellentesque sit amet porttitor. Ornare suspendisse sed nisi lacus sed viverra. Eget gravida cum sociis natoque penatibus et magnis dis. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Enim ut tellus elementum sagittis vitae et leo duis ut. Ut tellus elementum sagittis vitae et leo. Nascetur ridiculus mus mauris vitae. Tincidunt id aliquet risus feugiat in. Malesuada pellentesque elit eget gravida cum sociis natoque.</p>
          </div>
        </div>
      </div>          
    </div>
  </div>
</div>