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

**URL:** <https://forum.shopware.com/t/shopping-experience-landing-page-center-center-becomes-left-center/100804>\
**Category:** Shopware 6 (English)\
**Tags:** administration, programming, templates--design, other\
**Created:** [10. August 2023 um 08:51 UTC](https://forum.shopware.com/t/shopping-experience-landing-page-center-center-becomes-left-center/100804 "2023-08-10T08:51:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![matteo](https://avatars.discourse-cdn.com/v4/letter/m/f9ae1b/32.png) [@matteo](https://forum.shopware.com/u/matteo)\
**Post date:** [10. August 2023 um 08:51 UTC](https://forum.shopware.com/t/shopping-experience-landing-page-center-center-becomes-left-center/100804/1 "2023-08-10T08:51:45Z")

</div>

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:

```auto
.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