Container styles break skeleton alignment

[alissa9090]

text-align, padding and maybe other styles break position of skeleton :before.

In case of Modal it's

.bx--modal-footer .bx--btn {
   ...
   padding-top: 1rem;

   padding-bottom: 2rem;
}

What package(s) are you using?

• carbon-components^1041.0
• carbon-components-react ^7.41.0

Detailed description

Container styles should not break skeleton alignment.
In our project I've fixed it with

.bx--skeleton,
.bx--skeleton__text {
  &:before {
    top: 0;
    left: 0;
  }
}

Maybe there are other skeleton classes to be included.

Steps to reproduce the issue

1. Step one

Render Skeleton inside a div.

2. Step two

set div padding.

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/adoring-snowflake-5br1d?file=/src/index.js:352-371

Additional information