curriculum/challenges/english/blocks/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
The border-box sizing model does the opposite of content-box. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
Change the box-sizing property to border-box. Notice how your blue image borders now fit within your red gallery border.
Your * selector should have a box-sizing property set to border-box as the value.
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
</div>
</body>
</html>
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}