2 divs with same max-width display different widths

Question

The div for the red box and the div for the green and purple boxes are both set to the same max-width of 75rem. I'm stumped on how the red box is displaying a max-width of nearly 1250px when stretched on a wide monitor.

JSFiddle

I'm applying this helper class to both divs.

.wrapper {
margin: auto;
max-width: 75rem;
}

@Kenny my fiddle is showing me the same result as the attached pic when stretched past 1300px. Red div overhanging by about 25px on each side — trevorc, Apr 22 '20 at 06:30

score 2 · Accepted Answer · answered Apr 22 '20 at 06:36

2

Add CSS box-sizing:border-box to your .hero will solve the issue.

What happens

As .hero has padding 20px on left and right. Your whole div becomes 75rem + 40px

box-sizing:border-box makes sure that padding should be included in width. So your div's actual width will become 75rem - 40px

More on box sizing: https://www.w3schools.com/css/css3_box-sizing.asp

answered Apr 22 '20 at 06:36

Kiran Shinde

5,732
4
24
41

Ahh, that did it. Thanks! – trevorc Apr 22 '20 at 06:37

2 divs with same max-width display different widths

1 Answers1