Puse un borde para verlo mejor, lo único que tiene que hacer es cambiar la clase del margin (mt-5) de lugar

UPDATE:
Hice algunas modifcaciones per mantuve el grid como lo tenias. 

 - Primero puse un col-12 para que abarque toda la pantalla
 - Después quite el `justify-content-center` de donde lo tenias y creé un nuevo div de tipo flex para poner el contenido y listo

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .box {
      border: solid 1px red
    }

<!-- language: lang-html -->

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <div class="row box">
      <div class="col-12 my-5">
        <div class="justify-content-center d-flex">
          <div class='text-center'>
            <img src="/Order Sumary/images/icon-music.svg" alt="">
            <span class="h6"> Annual Plan</span>
            <span class="text d-block"><a href="">Change</a></span>
            <p>$59.99/year</p>
          </div>
        </div>
      </div>

    </div>

<!-- end snippet -->