fix(curriculum): implement a lesson about the box-sizing property (#50795)

Co-authored-by: Moshe <shootermv@gmail.com> Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com>
2026-05-28 18:26:54 +00:00 · 2023-09-05 10:42:39 -04:00
parent 18f7e7415d
commit 578d162b90
69 changed files with 1259 additions and 212 deletions
@@ -36,64 +36,76 @@
      "title": "Step 6"
    },
    {
-      "id": "615380dff67172357fcf0425",
+      "id": "64dd076a1b33c86d84b4232f",
      "title": "Step 7"
    },
    {
-      "id": "615f171d05def3218035dc85",
+      "id": "6494da0daf5df5197963671d",
      "title": "Step 8"
    },
    {
-      "id": "6153893900438b4643590367",
+      "id": "6493bc0d99879635209565aa",
      "title": "Step 9"
    },
    {
-      "id": "6153897c27f6334716ee5abe",
+      "id": "64dd136e4e8b0894f9c70d86",
      "title": "Step 10"
    },
    {
-      "id": "615389bd81347947ea7ba896",
+      "id": "615380dff67172357fcf0425",
      "title": "Step 11"
    },
    {
-      "id": "6153908a366afb4d57185c8d",
+      "id": "615f171d05def3218035dc85",
      "title": "Step 12"
    },
    {
-      "id": "615392916d83fa4f02f7e2cf",
+      "id": "6153893900438b4643590367",
      "title": "Step 13"
    },
    {
-      "id": "6153938dce8b294ff8f5a4e9",
+      "id": "6153897c27f6334716ee5abe",
      "title": "Step 14"
    },
    {
-      "id": "6153947986535e5117e60615",
+      "id": "6153908a366afb4d57185c8d",
      "title": "Step 15"
    },
    {
-      "id": "61539e07e7430b528fbffe21",
+      "id": "615392916d83fa4f02f7e2cf",
      "title": "Step 16"
    },
    {
-      "id": "61539f32a206bd53ec116465",
+      "id": "6153938dce8b294ff8f5a4e9",
      "title": "Step 17"
    },
    {
-      "id": "6153a04847abee57a3a406ac",
+      "id": "6153947986535e5117e60615",
      "title": "Step 18"
    },
    {
-      "id": "6153a3485f0b20591d26d2a1",
+      "id": "61539e07e7430b528fbffe21",
      "title": "Step 19"
    },
    {
-      "id": "6153a3952facd25a83fe8083",
+      "id": "61539f32a206bd53ec116465",
      "title": "Step 20"
    },
    {
-      "id": "6153a3ebb4f7f05b8401b716",
+      "id": "6153a04847abee57a3a406ac",
      "title": "Step 21"
+    },
+    {
+      "id": "6153a3485f0b20591d26d2a1",
+      "title": "Step 22"
+    },
+    {
+      "id": "6153a3952facd25a83fe8083",
+      "title": "Step 23"
+    },
+    {
+      "id": "6153a3ebb4f7f05b8401b716",
+      "title": "Step 24"
    }
  ]
 }
@@ -1,6 +1,6 @@
 ---
 id: 61537485c4f2a624f18d7794
-title: 步骤 1
+title: Step 1
 challengeType: 0
 dashedName: step-1
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537a8054753e2f1f2a1574
-title: 步骤 2
+title: Step 2
 challengeType: 0
 dashedName: step-2
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537bb9b1a29430ac15ad38
-title: 步骤 3
+title: Step 3
 challengeType: 0
 dashedName: step-3
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537c5f81f0cf325b4a854c
-title: 步骤 4
+title: Step 4
 challengeType: 0
 dashedName: step-4
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537c9eecea6a335db6da79
-title: 步骤 5
+title: Step 5
 challengeType: 0
 dashedName: step-5
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537d86bdc3dd343688fceb
-title: 步骤 6
+title: Step 6
 challengeType: 0
 dashedName: step-6
 ---
@@ -1,8 +1,8 @@
 ---
 id: 615380dff67172357fcf0425
-title: 步骤 7
+title: Step 11
 challengeType: 0
-dashedName: step-7
+dashedName: step-11
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153893900438b4643590367
-title: 步骤 9
+title: Step 13
 challengeType: 0
-dashedName: step-9
+dashedName: step-13
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153897c27f6334716ee5abe
-title: 步骤 10
+title: Step 14
 challengeType: 0
-dashedName: step-10
+dashedName: step-14
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 615389bd81347947ea7ba896
-title: 步骤 11
+title: Step 15
 challengeType: 0
-dashedName: step-11
+dashedName: step-15
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153908a366afb4d57185c8d
-title: 步骤 12
+title: Step 16
 challengeType: 0
-dashedName: step-12
+dashedName: step-16
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 615392916d83fa4f02f7e2cf
-title: 步骤 13
+title: Step 17
 challengeType: 0
-dashedName: step-13
+dashedName: step-17
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153938dce8b294ff8f5a4e9
-title: 步骤 14
+title: Step 18
 challengeType: 0
-dashedName: step-14
+dashedName: step-18
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153947986535e5117e60615
-title: 步骤 15
+title: Step 19
 challengeType: 0
-dashedName: step-15
+dashedName: step-19
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 61539e07e7430b528fbffe21
-title: 步骤 16
+title: Step 20
 challengeType: 0
-dashedName: step-16
+dashedName: step-20
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 61539f32a206bd53ec116465
-title: 步骤 17
+title: Step 21
 challengeType: 0
-dashedName: step-17
+dashedName: step-21
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a04847abee57a3a406ac
-title: 步骤 18
+title: Step 22
 challengeType: 0
-dashedName: step-18
+dashedName: step-22
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3485f0b20591d26d2a1
-title: 步骤 19
+title: Step 23
 challengeType: 0
-dashedName: step-19
+dashedName: step-23
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3952facd25a83fe8083
-title: 步骤 20
+title: Step 24
 challengeType: 0
-dashedName: step-20
+dashedName: step-24
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3ebb4f7f05b8401b716
-title: 步骤 21
+title: Step 25
 challengeType: 0
-dashedName: step-21
+dashedName: step-25
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 615f171d05def3218035dc85
-title: 步骤 8
+title: Step 12
 challengeType: 0
-dashedName: step-8
+dashedName: step-12
 ---

 # --description--
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--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;
+}
+```
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -1,30 +1,28 @@
 ---
-id: 615389bd81347947ea7ba896
-title: Step 11
+id: 64dd136e4e8b0894f9c70d86
+title: Step 10
 challengeType: 0
-dashedName: step-11
+dashedName: step-10
 ---

 # --description--

-Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.

-To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
-
-Create a `.gallery` selector and make it a flex container.
+Remove your `.gallery` and `img` selectors, and all rules within.

 # --hints--

-You should have a `.gallery` selector.
+You should not have a `.gallery` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery'));
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
 ```

-Your `.gallery` selector should have a `display` property set to `flex` as the value.
+You should not have an `img` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex');
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
 ```

 # --seed--
@@ -57,35 +55,25 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex')
    </div>
  </body>
 </html>
+
+
 ```

 ```css
-* {
+ * {
  box-sizing: border-box;
 }

-body {
-  margin: 0;
-  font-family: sans-serif;
-  background: #f5f6f7;
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
 }

-.header {
-  text-align: center;
-  text-transform: uppercase;
-  padding: 32px;
-  background-color: #0a0a23;
-  color: #fff;
-  border-bottom: 4px solid #fdb347;
-}
-
--fcc-editable-region--
-
--fcc-editable-region--
-
-.gallery img {
+img {
  width: 100%;
-  max-width: 350px;
-  height: 300px;
+  border: 5px solid blue;
+  padding: 5px;
 }
+--fcc-editable-region--
 ```
@@ -1,30 +1,47 @@
 ---
 id: 615380dff67172357fcf0425
-title: Step 7
+title: Step 11
 challengeType: 0
-dashedName: step-7
+dashedName: step-11
 ---

 # --description--

-Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box` as the value.
+Now your images are too big.
+
+Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.

 # --hints--

-You should have a `*` selector.
+You should have a `.gallery img` selector.

 ```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
 ```

-Your `*` selector should have a `box-sizing` property set to `border-box` as the value.
+Your `.gallery img` selector should have a `width` property set to `100%` as the value.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
+```
+
+Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
 ```

 # --seed--

+
 ## --seed-contents--

 ```html
@@ -56,6 +73,10 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
 ```

 ```css
+* {
+  box-sizing: border-box;
+}
+
 --fcc-editable-region--

 --fcc-editable-region--
@@ -1,43 +1,63 @@
 ---
 id: 6153893900438b4643590367
-title: Step 9
+title: Step 13
 challengeType: 0
-dashedName: step-9
+dashedName: step-13
 ---

 # --description--

-Remove the margin from your `body` element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+
+Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+
+Add a `border-bottom` with `4px solid #fdb347` as the value.

 # --hints--

-You should have a `body` selector.
+You should have a `.header` selector.

 ```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
 ```

-Your `body` selector should have a `margin` property set to `0` as the value.
+Your `.header` selector should have a `text-align` property set to `center` as the value.

 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
-assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
-assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
-assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
 ```

-Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
 ```

-Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+Your `.header` selector should have a `padding` property set to `32px` as the value.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
 ```

+Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+Your `.header` selector should have a `color` property set to `#fff` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
+```
+
+Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
+```
+
+
 # --seed--

 ## --seed-contents--
@@ -74,6 +94,11 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
 * {
  box-sizing: border-box;
 }
+body  {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f5f6f7;
+}

 --fcc-editable-region--

@@ -1,62 +1,32 @@
 ---
 id: 6153897c27f6334716ee5abe
-title: Step 10
+title: Step 14
 challengeType: 0
-dashedName: step-10
+dashedName: step-14
 ---

 # --description--

-Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.

-Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
+
+Create a `.gallery` selector and make it a flex container.

-Add a `border-bottom` with `4px solid #fdb347` as the value.


 # --hints--

-You should have a `.header` selector.
+You should have a `.gallery` selector.

 ```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
 ```

-Your `.header` selector should have a `text-align` property set to `center` as the value.
+Your `.gallery` selector should have a `display` property set to `flex` as the value.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
-```
-
-Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
-```
-
-Your `.header` selector should have a `padding` property set to `32px` as the value.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
-```
-
-Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
-```
-
-Your `.header` selector should have a `color` property set to `#fff` as the value.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
-```
-
-Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
-
-```js
-console.log(new __helpers.CSSHelp(document).getStyle('.header'))
-assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
 ```

 # --seed--
@@ -102,6 +72,15 @@ body {
  background: #f5f6f7;
 }

+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
 --fcc-editable-region--

 --fcc-editable-region--
@@ -1,8 +1,8 @@
 ---
 id: 6153908a366afb4d57185c8d
-title: Step 12
+title: Step 15
 challengeType: 0
-dashedName: step-12
+dashedName: step-15
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 615392916d83fa4f02f7e2cf
-title: Step 13
+title: Step 16
 challengeType: 0
-dashedName: step-13
+dashedName: step-16
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153938dce8b294ff8f5a4e9
-title: Step 14
+title: Step 17
 challengeType: 0
-dashedName: step-14
+dashedName: step-17
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153947986535e5117e60615
-title: Step 15
+title: Step 18
 challengeType: 0
-dashedName: step-15
+dashedName: step-18
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 61539e07e7430b528fbffe21
-title: Step 16
+title: Step 19
 challengeType: 0
-dashedName: step-16
+dashedName: step-19
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 61539f32a206bd53ec116465
-title: Step 17
+title: Step 20
 challengeType: 0
-dashedName: step-17
+dashedName: step-20
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a04847abee57a3a406ac
-title: Step 18
+title: Step 21
 challengeType: 0
-dashedName: step-18
+dashedName: step-21
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3485f0b20591d26d2a1
-title: Step 19
+title: Step 22
 challengeType: 0
-dashedName: step-19
+dashedName: step-22
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3952facd25a83fe8083
-title: Step 20
+title: Step 23
 challengeType: 0
-dashedName: step-20
+dashedName: step-23
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3ebb4f7f05b8401b716
-title: Step 21
+title: Step 24
 challengeType: 0
-dashedName: step-21
+dashedName: step-24
 ---

 # --description--
@@ -1,40 +1,45 @@
 ---
 id: 615f171d05def3218035dc85
-title: Step 8
+title: Step 12
 challengeType: 0
-dashedName: step-8
+dashedName: step-12
 ---

 # --description--

-Your images are too big. Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px` so they shrink as needed but don't get too big.
+Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.

-Also set the `height` property to `300px` to keep your images a uniform size.

 # --hints--

-You should have a `.gallery img` selector.
+You should have a `body` selector.

 ```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
 ```

-Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+Your `body` selector should have a `margin` property set to 0 as the value.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
 ```

-Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+Your `body` selector should have a `font-family` property set to `sans-serif` as the value.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
 ```

-Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
 ```

 # --seed--
@@ -77,4 +82,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300
 --fcc-editable-region--

 --fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+
 ```
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--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;
+}
+```
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```
@@ -1,6 +1,6 @@
 ---
 id: 61537485c4f2a624f18d7794
-title: Paso 1
+title: Step 1
 challengeType: 0
 dashedName: step-1
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537a8054753e2f1f2a1574
-title: Paso 2
+title: Step 2
 challengeType: 0
 dashedName: step-2
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537bb9b1a29430ac15ad38
-title: Paso 3
+title: Step 3
 challengeType: 0
 dashedName: step-3
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537c5f81f0cf325b4a854c
-title: Paso 4
+title: Step 4
 challengeType: 0
 dashedName: step-4
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537c9eecea6a335db6da79
-title: Paso 5
+title: Step 5
 challengeType: 0
 dashedName: step-5
 ---
@@ -1,6 +1,6 @@
 ---
 id: 61537d86bdc3dd343688fceb
-title: Paso 6
+title: Step 6
 challengeType: 0
 dashedName: step-6
 ---
@@ -1,8 +1,8 @@
 ---
 id: 615380dff67172357fcf0425
-title: Paso 7
+title: Step 11
 challengeType: 0
-dashedName: step-7
+dashedName: step-11
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153893900438b4643590367
-title: Paso 9
+title: Step 13
 challengeType: 0
-dashedName: step-9
+dashedName: step-13
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153897c27f6334716ee5abe
-title: Paso 10
+title: Step 14
 challengeType: 0
-dashedName: step-10
+dashedName: step-14
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 615389bd81347947ea7ba896
-title: Paso 11
+title: Step 15
 challengeType: 0
-dashedName: step-11
+dashedName: step-15
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153908a366afb4d57185c8d
-title: Paso 12
+title: Step 16
 challengeType: 0
-dashedName: step-12
+dashedName: step-16
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 615392916d83fa4f02f7e2cf
-title: Paso 13
+title: Step 17
 challengeType: 0
-dashedName: step-13
+dashedName: step-17
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153938dce8b294ff8f5a4e9
-title: Paso 14
+title: Step 18
 challengeType: 0
-dashedName: step-14
+dashedName: step-18
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153947986535e5117e60615
-title: Paso 15
+title: Step 19
 challengeType: 0
-dashedName: step-15
+dashedName: step-19
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 61539e07e7430b528fbffe21
-title: Paso 16
+title: Step 20
 challengeType: 0
-dashedName: step-16
+dashedName: step-20
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 61539f32a206bd53ec116465
-title: Paso 17
+title: Step 21
 challengeType: 0
-dashedName: step-17
+dashedName: step-21
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a04847abee57a3a406ac
-title: Paso 18
+title: Step 22
 challengeType: 0
-dashedName: step-18
+dashedName: step-22
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3485f0b20591d26d2a1
-title: Paso 19
+title: Step 23
 challengeType: 0
-dashedName: step-19
+dashedName: step-23
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3952facd25a83fe8083
-title: Paso 20
+title: Step 24
 challengeType: 0
-dashedName: step-20
+dashedName: step-24
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 6153a3ebb4f7f05b8401b716
-title: Paso 21
+title: Step 25
 challengeType: 0
-dashedName: step-21
+dashedName: step-25
 ---

 # --description--
@@ -1,8 +1,8 @@
 ---
 id: 615f171d05def3218035dc85
-title: Paso 8
+title: Step 12
 challengeType: 0
-dashedName: step-8
+dashedName: step-12
 ---

 # --description--
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--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;
+}
+```
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!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">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```