Bootstrap: v5 - When using gx-5 class total container width is 1156px, with other gx classes width is always 1140px

[erperion]

I think gutter width shouldn't influence total width of container. No matter which gx class I will use container should be always the same size.
Codepen example

[Hiws]

The containers width is technically still 1140px, but the row inside it is overflowing it.

It looks like when the gutter size goes over the containers padding (1rem by default), the row will start overflowing the parent container.
If you add px-4 (which is 1.5rem, just like what the margin/padding are on the row/cols) to the container with the gx-5 row, you should see that it should display itself correctly.

Not really sure how to fix that, but thought I'd share my short research.

[mdo]

https://v5.getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters explains some of this, but maybe the docs could be improved here.

/cc @MartijnCuppens

[MartijnCuppens]

The containers width is technically still 1140px, but the row inside it is overflowing it.

Indeed

Not really sure how to fix that, but thought I'd share my short research.

v5.getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters explains some of this, but maybe the docs could be improved here.

That's indeed the explaination. You can either use px-4 to fix the overflow but this influences the container width. overflow-hidden won't influence your container width.

[erperion]

https://v5.getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters explains some of this, but maybe the docs could be improved here.

I missed that part. My mistake. Adding overflow-hidden class fixed my problem. Thanks for explaining why it happened.