# Centre the gallery

**URL:** <https://community.elfsight.com/t/centre-the-gallery/61925>\
**Category:** Customization\
**Created:** [July 18, 2024, 4:21pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925 "2024-07-18T16:21:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ProBike](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/probike/32/20070_2.png) [@ProBike](https://community.elfsight.com/u/ProBike)\
**Post date:** [July 18, 2024, 4:21pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/1 "2024-07-18T16:21:01Z")

</div>

When I save the HTML code on my website builder, the gallery is aligning to the left of the page builder box, not in the centre.

Width is set to 100% but it does not fill the box, its always to the left with a gap on the right.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 18, 2024, 4:26pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/3 "2024-07-18T16:26:45Z")

</div>

Hi there @ProBike 👋

Could you please send me a link to the page where your widget is installed?

---

<div class="post-metadata">

**Author:** ![ProBike](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/probike/32/20070_2.png) [@ProBike](https://community.elfsight.com/u/ProBike)\
**Post date:** [July 18, 2024, 4:27pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/4 "2024-07-18T16:27:26Z")

</div>

[ProBike](https://probike.co.uk/)

Its the information section, slightly to the left.

Thanks.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 18, 2024, 4:30pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/5 "2024-07-18T16:30:57Z")

</div>

Thanks! It seems to be centered on my end:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/c/8cdd9f0ab01cea9dd50106764ab91326f5c62a51.jpeg)

Could you please check it in incognito mode? If the issue still persists there, please send me a screenshot of how it looks on your side 🙂

---

<div class="post-metadata">

**Author:** ![ProBike](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/probike/32/20070_2.png) [@ProBike](https://community.elfsight.com/u/ProBike)\
**Post date:** [July 18, 2024, 4:33pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/6 "2024-07-18T16:33:13Z")

</div>

![Info Gap](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/c/2c7ba3f5c0495067f7ecaea0378b43b42d2c694f.jpeg)  
Can you see the gap on the right to the box is more than on the left?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 18, 2024, 4:44pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/7 "2024-07-18T16:44:18Z")

</div>

Oh, I am sorry, you are absolutely right!

Please try to use this code in the Custom CSS field on the Style tab and let me know if it helped:

```auto
.global-styles, [class*="RootLayout__Component"] {
margin: auto;
}

```

---

<div class="post-metadata">

**Author:** ![ProBike](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/probike/32/20070_2.png) [@ProBike](https://community.elfsight.com/u/ProBike)\
**Post date:** [July 19, 2024, 9:16am UTC](https://community.elfsight.com/t/centre-the-gallery/61925/8 "2024-07-19T09:16:11Z")

</div>

Unfortunately not, still sitting to the left of the box.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 19, 2024, 1:54pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/9 "2024-07-19T13:54:39Z")

</div>

We’ve fixed the issue with this CSS code:

```auto
.eapp-photo-gallery-masonry-component {
  margin: 0;
}

```

  

Check your website and let me know if you like what you see 🙂

---

<div class="post-metadata">

**Author:** ![ProBike](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/probike/32/20070_2.png) [@ProBike](https://community.elfsight.com/u/ProBike)\
**Post date:** [July 19, 2024, 2:34pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/10 "2024-07-19T14:34:59Z")

</div>

Thank you. Looks better.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 19, 2024, 2:36pm UTC](https://community.elfsight.com/t/centre-the-gallery/61925/11 "2024-07-19T14:36:06Z")

</div>

You are always welcome 😉