Group style inconsistent behaviour in same environment

Hi, I’m backend developer, new to UI and Bubble. I want to customise the default group style (Group Light Border), hence created a new group style. During testing I notice something really weird:

  1. default style: content in the group is center aligned
  2. new style (modified background color/border visibility): content is left aligned
  3. new style (exactly same settings as default style): content is left aligned.

In group’s setting, if I keep switching style between (1) and (2) or (1) and (3), output for (2) and (3) will intermittently become center aligned.

My environment: Chrome 81.0 on Mac OS Sierra.

My confusions:

  1. Why would group’s background color or border visibility affects content alignment?
  2. Why would new style behaves differently from default style, even when their settings are exactly the same?
  3. How do we ensure test result is reliable? Is there a practical way to ensure result consistency? I tried closing browser window but it didn’t help.

Attached pic for illustration, the dark gray element left aligned within the content group. Even more weird is that, the same group also has a text element (width 300px) as page title, which consistently left aligned during testing.

Thanks for advice.