Quantcast
Viewing all articles
Browse latest Browse all 1315

Bootstrap flex rows shifted left of center with negative margins

The default behavior of bootstrap grid is to put negative margins on the rows, and a positive padding the same absolute value on the cols to allow gutters while keeping the alignment.However, the -12px of negative margin on my row is rendering it flush with the left of the screen, but not with the right of the screen. Visibly, it looks like the right padding of 12 px and the left margin of -12px is actually causing the appearance of 24px Image may be NSFW.
Clik here to view.
see screenshot with computed layout
of empty space on the right of the screen. Why does this happen? I can fix it with mx-0 but what am I doing wrong that is "breaking" the default behavior?

I tried justify-content-center on the row instead of justify-content-start. I tried putting the row directly in my app root, in a plain div, or in a col div within that root. I was able to fix it with mx-0 on the row, but again this removes the negative margins and they're there for a reason, so i want to understand why it's not working to begin with.


Viewing all articles
Browse latest Browse all 1315

Trending Articles