Combo class inheritance

i’m confused as to combo class inheritance across breakpoints for different types css properties -

on desktop, i have a container (.container) with a bottom padding of 6rem, i add a global combo class of .bp3 which changes the bottom padding to 3rem. when i look at the element on tablet breakpoint, the bottom padding is not inherited from the combo class, but from the container. so i would need to explicitly re-declare the bottom padding of 3rem on tablet breakpoint.

on desktop, i have a container (.container) explicitly set to display:block, and i add a global combo class of .flex-row, which changes the element to flex row on tablet AND the flex row is inherited on tablet and smaller breakpoints, so I don’t have to explicitly re-declare it.

why the difference here between padding not getting inherited and display properties getting inherited? is there a set of rules for what does and doesn’t.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)