Assuming I have a folowing code - [fiddle](https://jsfiddle.net/L30vkom4/3/) - with `font-size` attribute set for `<html>` tag. **This styling** along with header and footer is generated via js script which **cannot be removed**. This is already existing page for a long time.

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="bootstrap4.css">
    <link rel="stylesheet" href="myCustomCss.css">
    <link rel="stylesheet" href="cssLoadedByJs.css">
  </head>
  <body>

    <div>
      Header (need to stay as it is now with smaller font)
    </div>

    <div class="content"> <!--  (need to reset it 100%, so content will be sized as I want...) -->
      Content
      <h2>
        H1 here
      </h2>
    </div>

    <div>
      Footer (need to stay as it is now with smaller font)
    </div>

  </body>
</html>

```

Css file injected by remote js (cssLoadedByJs.css) - cannot remove it, need to stay:

```
html {font-size: 62.5% !important;}

```

myCustomCss.css - what I was trying to do:

```
html .content {
    /* font-size: 100% !important; */
    /* font-size: unset; */
    /* font-size: 16px; */
}

```

How to reset `font-size` attribute for content div only and preserve header and footer as it is?

I've tried to set `font-size: unset;` or `font-size: 100%` for content div but no result. `font-size: 16px` let me render text in 16px as I want, but h2 still has only 20px insted of 32px (due to this sizing for html tag, bootstrap use 2rem for h2). Anyway I believe that there is better way than just hardcoded pixel size. Possible to do this somehow? Pls check [fiddle](https://jsfiddle.net/L30vkom4/3/) for better understanding and tests...