<sup> tag not working in WordPress

Question

I am trying to use Trademark & Registered/Copyright symbols smaller in a WordPress site, but doing some of the standard methods for CSS were not working, and using what I have below maybe somebody has an idea on how I could expand.

Traditional/Normal way I would have done this:

Awesomesauce <sup>&reg;</sup> would look like Awesomesauce® (the R is smaller than other text).

In the theme I am using, it was not doing that with that tag

I then tried <span style="font-size:6px;"> just see if it would do anything different. No luck.

So, I then approached it from a JavaScript side of things. I started with my H1 tag

jQuery(function($){
  var $el = $(".section_header .post_title"); 
  var t = $el.text(); 
  t = t.replace('®','<sup>®</sup>');
  $el.html(t);
});

Since that works, how would I make the same work for body text because I cannot get it to work using the following code

jQuery(function($){
  var $el = $(".wpb_text_column .wpb_wrapper p"); 
  var t = $el.text(); 
  t = t.replace('®','<sup>®</sup>');
  $el.html(t);
});

jQuery(function($){
  var $el = $(".section_header .post_title"); 
  var t = $el.text(); 
  t = t.replace('®','<sup>®</sup>');
  $el.html(t);
});

What the HTML section looks like:

Answer 1

It's very normal that WP themes overwrite default browser style.
Try adding this to your custom.css file:

sup {
    vertical-align: super;
    font-size: smaller;
}

If you don't use custom style or child theme ^{(Why use a Child Theme)}
Then, add that code at the very bottom of your theme style css file.