JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<html>

  <header>
    <h1>
      Hey there! <div class="shift-right">
        I'm saying hi from the right
      </div>
    </h1>
  </header>

  <p>
    Make sure to shrink the screen to see mobile view. "text-right" is being pulled from Bootstrap 4. Also replace <b>"text-right"</b> with <b>"shift-right"</b>. Notice the difference in the style application.
  </p>


</html>

CSS

html {
  padding: 10px;
}

header {
  padding: 0px 10px 0px 10px;
}

p {
  padding: 15px 0px;
}

/* Mobile portrait mode

 -------------------------------- */

@media only screen and (max-width: 479px) {
  header {
    text-align: center;
    background-color: blue;
  }

  /*Overriding boostrap 4 text-right*/
  .text-right {
    text-align: center !important;
  }

    /*Showing how !important breaks in mobile view*/
  /*.text-right::after {
    background-color: grey;
    font-size: .95rem;
    content: "crap mobile users are out of luck";
  }*/

  .shift-right {
    text-align: center;
  }
  
  /*.shift-right::after {
    background-color: grey;
    font-size: .95rem;
    content: "okay mobile users are *in of luck";
  }*/

}