Container x-padding (1rem + 1rem) larger than row negative margins (-1.5rem)
Created by: jeffhuang
I'm a little confused why the padding on containers,
padding-right: 1rem;
padding-left: 1rem;
is 2rem in total, but the row negative margins are -1.5rem in total
.row {
--bs-gutter-x: 1.5rem;
/* snip */
margin-right: calc(var(--bs-gutter-x) / -2);
margin-left: calc(var(--bs-gutter-x) / -2);
}
This results in 0.25rem of padding on the left and right of the containers, and makes edge-to-edge a challenge. While it doesn't matter much in the examples because they use a white background, it makes edge-to-edge backgrounds a problem. Is this intentional or a bug? Because my interpretation of the documentation is that the negative margins on the rows should exactly counteract the padding on containers. When I set --bs-gutter-x to 2rem, the problem goes away.
Thanks for all the work on Bootstrap v5! I am very excited about the stable release.