How to make two container center

Hi there,

It’s not possible with Grid.

You will need to select the Grid block(gb-element-6481c8b6), switch to mobile, and change its display to flex instead of grid, set flex-wrap to wrap, set justify-content to center.

You can select each of the containers and add left/right paddings to them.

For gb-element-6481c8b6, how can I adjust the Max Width to reduce the spacing of the Red Box on the left and right side in the screenshot?

If you view the layout on an actual mobile device, you’ll see that it already spans the full width with the appropriate margins: https://cln.sh/09xS3jJ1Pty6RxsqnqwV

The editor preview doesn’t always match the frontend exactly, so it’s always best to check the live page to see the final result.

If you want to increase the space on the left and right sides of the Grid, simply add values to the Margin Left and Margin Right settings. It will create additional spacing while keeping the layout centered.

how to adjust the spacing or margin to reduce the width of the red box area I labeled?

The parent container isn’t limiting the content width, the only spacing added to the left and right of this section is from container gb-element-51eba02a, which has 5px left/right paddings on mobile. You can set that to 0 to gain 10px more space for the child containers.

If you want the child containers’ width to increase, you can increase their left/right paddings. Or set their flex-grow to 1, so they will automatically increase their width to try to fill the entire horizontal space.