Override default styles to center Avada portfolio grid

Question

I'm looking for some advanced CSS help here in order to center the portfolio items located on this page [https://elysewalkerinteriors.com/interior-design-oakville/][1]

As you can see, they all appear to skew to the left. The underlying <article> (portfolio items) are all absolutely positioned with the parent container set to position: relative.

I had to add a custom style to make each column width 32% (33% caused the column layout to break from 3 columns to 2, leaving a big white gap on the right side).

I'm curious how one might approach this situation and center the portfolio items on the page.

Thank you [1]: https://elysewalkerinteriors.com/interior-design-oakville/#:~:text=Check%20Out%20Some%20Of%20Our%20Latest%20Designs

Answer 1

CSS Grid:

A CSS grid is defined using the grid value of the display property; you can define columns and rows on your grid using the grid-template-rows and grid-template-columns properties.

section {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

article {
  background: red;
}

<section>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
</section>