Shopping Experience, Landing page: "center center" becomes "left center"

Shopware 6 (English)
, , ,
1

Hello,
in a Shopping Experience > Landing page I:

  • added a „Four column, boxed“ block;
  • replaced the right image with a „Text“ box;
  • vertically centered the box, wrote „Display them all“ in it, horizontally centered it, transformed it into a link selecting the „Display the link as a button“ option.

In the Shopping Experiences the button is correctly shown as both vertically and horizontally centered. In the storefront it’s aligned to the left.

This is the HTML structure in the storefront: div.cms-element-text.has-vertical-alignment > div.cms-element-alignment.align-self-center > div[align="center"] > a.btn.btn-primary

The problem seems to be that the div.cms-element-alignment.align-self-center is missing „margin-left: auto; margin-right: auto;“ or a „width: 100%“.
I fixed it by associating a cms-horizontal-align-fix CSS class to the „Four column, boxed“ block and then defining this:

.cms-horizontal-align-fix .cms-element-alignment.align-self-center {
    margin-left:  auto;
    margin-right: auto;
}

Something similar should probably be the default to fix the problem.

Can anybody help me find a better solution?

Thanks in advance