The problem
I have a stupid problem that I can't find a solution to... I'm using Material for MkDocs which is a theme for MkDocs. the theme sets the <html> font-size to 125% and then uses rems to set font-sizes, padding, etc.
I want to use some Bootstrap components with this theme and though it works fine, everything is scaled up because of the 125% rem base set in the <html> tag. The Bootstrap components/code are going to live inside of a wrapper with a .demo class like this:
<div class="demo">
<button class="btn btn-primary">Button</button>
</div>
Part solution
I have a custom.css file where if I set .demo { font-size: 0.8rem } the font-size of the button becomes 16px, as it should, but the padding remains the same.
Question
How can I manipulate the "scaling" that is done in the <html> tag of the theme or can I somehow scale down the padding of the Bootstrap components/contents of the .demo class?