Probleme CSS

Bonjour,

Voilà j'ai presque fini mon site, cependant je viens de m'apercevoir que j'ai un probleme avec une div quand je test mon site sur mobile !
Mon site utilise boostrap ! je ne vois pas ou est le probleme et vous ?

ma div:

<div class="col-md-12">
     <h4 class="app-footer-text">
          <?= $words[1]['content'] ?>
     </h4>     
 </div>

css:

h4.app-footer-text {

    background: #30499A;

    padding: 10px 20px;

    color: #fff;

    border-radius: 5px;

    position: relative; 

}

h4.app-footer-text:after {

    content: "";

    top: 5px;

    position: absolute;

    right: 0;

    border-left: 10px solid #fff;

    border-right: 10px solid transparent;

    border-top: 15px solid transparent;

    border-bottom: 15px solid transparent;

}