Hoping someone can help me understand where this space is coming from:
The two boxes with dice rolls are set to inline-block with a width of 50% using box-sizing: border-box. There's 0 margin and 0 padding. I had to turn on white-space: nowrap to figure out why the second box kept going under the first. I can get rid of the space by setting a negative left margin, but would rather not do that if I don't have to.
Any help would be greatly appreciated.
I'm not proficient enough to be able to tell what the problem is without seeing your code. When I run into a problem like this, I'll often set the background colours to something weird so that I can see exactly where the boundaries are between divs - sometimes that helps.
Jakob said:
It's definitely whitespace. Use CSS grid or flexbox and never worry about whitespace again .
This! CSS Grid is a miracle worker for 2-dimensional layouts. Flexbox is awesome as well, and actually better than grid when you only care about alignment along one axis.
