How to make columns equal width & centered?

Site URL: http://www.gemcopy.com

Passcode is gem234

I'm struggling with this on two parts of my home page...under copywriting services and under the "let's make your voice heard" section.

I've tried messing with the spaces but can't get these centered without making the columns super narrow. Ideally I'd like to decrease the space between columns, but not to the degree the smallest spacer will allow. I also need these to be centered.

Would appreciate any help! Thanks!

Hi Kara,

It looks like it's because of the way you have added the spacers.  I would either;

1. add spacers left & right of all columns (you do not have one left of the first column; or
2. remove the spacers, and use flex-box to spread the columns evenly (this would be the most responsive way of achieving your goal.

For option 2, remove all the spacers and try the below code:

#page-61e7db92aaec125829bddaf9 > .sqs-row ~.sqs-row{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between
}

You can play with justify-content to see which kind of spacing you prefer.
I'd go with space-around, or space-between.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Let us know how you go! ❤️