diff --git a/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json b/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json
index 9a26eb1979..3fc2298a1f 100644
--- a/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json
+++ b/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json
@@ -119,80 +119,76 @@
       "Step 27"
     ],
     [
-      "60a3e3396c7b40068ad69985",
+      "60a3e3396c7b40068ad69986",
       "Step 28"
     ],
     [
-      "60a3e3396c7b40068ad69986",
+      "60a3e3396c7b40068ad69987",
       "Step 29"
     ],
     [
-      "60a3e3396c7b40068ad69987",
+      "60a3e3396c7b40068ad69988",
       "Step 30"
     ],
     [
-      "60a3e3396c7b40068ad69988",
+      "60a3e3396c7b40068ad69989",
       "Step 31"
     ],
     [
-      "60a3e3396c7b40068ad69989",
+      "60a3e3396c7b40068ad6998a",
       "Step 32"
     ],
     [
-      "60a3e3396c7b40068ad6998a",
+      "60a3e3396c7b40068ad6998b",
       "Step 33"
     ],
     [
-      "60a3e3396c7b40068ad6998b",
+      "60a3e3396c7b40068ad6998c",
       "Step 34"
     ],
     [
-      "60a3e3396c7b40068ad6998c",
+      "60a3e3396c7b40068ad6998d",
       "Step 35"
     ],
     [
-      "60a3e3396c7b40068ad6998d",
+      "60a3e3396c7b40068ad6998e",
       "Step 36"
     ],
     [
-      "60a3e3396c7b40068ad6998e",
+      "60a3e3396c7b40068ad6998f",
       "Step 37"
     ],
     [
-      "60a3e3396c7b40068ad6998f",
+      "60a3e3396c7b40068ad69990",
       "Step 38"
     ],
     [
-      "60a3e3396c7b40068ad69990",
+      "60a3e3396c7b40068ad69991",
       "Step 39"
     ],
     [
-      "60a3e3396c7b40068ad69991",
+      "60a3e3396c7b40068ad69992",
       "Step 40"
     ],
     [
-      "60a3e3396c7b40068ad69992",
+      "60a3e3396c7b40068ad69993",
       "Step 41"
     ],
     [
-      "60a3e3396c7b40068ad69993",
+      "60a3e3396c7b40068ad69994",
       "Step 42"
     ],
     [
-      "60a3e3396c7b40068ad69994",
+      "60a3e3396c7b40068ad69995",
       "Step 43"
     ],
     [
-      "60a3e3396c7b40068ad69995",
+      "60a3e3396c7b40068ad69996",
       "Step 44"
     ],
-    [
-      "60a3e3396c7b40068ad69996",
-      "Step 45"
-    ],
     [
       "60a3e3396c7b40068ad69997",
-      "Step 46"
+      "Step 45"
     ]
   ]
-}
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md
index e14a703d4a..8e0a9bdaf3 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69985
+id: 60a3e3396c7b40068ad69986
 title: Step 28
 challengeType: 0
 dashedName: step-28
@@ -7,25 +7,33 @@ dashedName: step-28
 
 # --description--
 
-Use margins to adjust the spacing between `one` and `two`.
-
-Change the `margin` of `.one` to `20px auto 20px` so the top margin is 20 pixels, it's centered horizontally, and the bottom margin is 20 pixels.
+Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
 
 # --hints--
 
-You should set the `margin` property to `20px auto 20px`.
+Your existing `.one` and `.two` elements should not be changed.
 
 ```js
-const hasMarginRegex = /20px\s*auto\s*20px/;
-// TODO: Why is this stripped? Because margins are the same?
-assert(hasMarginRegex.test(code));
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
 ```
 
-Your `.one` element should have a `margin` value of `20px auto 20px`.
+Your new `div` should be nested in your `.canvas` element.
 
 ```js
-const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/
-assert(oneMarginRegex.test(code));
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+Your new `div` should come after your `.two` element.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+Your new `div` element should have a `class` with the value `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
 ```
 
 # --seed--
@@ -51,9 +59,7 @@ assert(oneMarginRegex.test(code));
   width: 425px;
   height: 150px;
   background-color: #efb762;
---fcc-editable-region--
   margin: 20px auto;
---fcc-editable-region--
 }
 
 .two {
@@ -77,6 +83,9 @@ assert(oneMarginRegex.test(code));
       <div class="canvas">
         <div class="one"></div>
         <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
       </div>
     </div>
   </body>
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md
index 2a2a4e7a2a..58fe20757d 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69986
+id: 60a3e3396c7b40068ad69987
 title: Step 29
 challengeType: 0
 dashedName: step-29
@@ -7,33 +7,31 @@ dashedName: step-29
 
 # --description--
 
-Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
+You don't always have to use pixels when sizing an element.
+
+Create a new rule, `.three`, and set its `width` to `91%`.
 
 # --hints--
 
-Your existing `.one` and `.two` elements should not be changed.
+You should use the `.three` selector.
 
 ```js
-assert(document.querySelectorAll('.one').length === 1);
-assert(document.querySelectorAll('.two').length === 1);
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
 ```
 
-Your new `div` should be nested in your `.canvas` element.
+You should set the `width` property to `91%`.
 
 ```js
-assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
 ```
 
-Your new `div` should come after your `.two` element.
+Your `.three` element should have a `width` value of `91%`.
 
 ```js
-assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
-```
-
-Your new `div` element should have a `class` with the value `three`.
-
-```js
-assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
 ```
 
 # --seed--
@@ -59,7 +57,7 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
@@ -68,6 +66,11 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
   background-color: #8f0401;
   margin: auto;
 }
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
 ```
 
 ```html
@@ -83,9 +86,7 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
       <div class="canvas">
         <div class="one"></div>
         <div class="two"></div>
---fcc-editable-region--
-
---fcc-editable-region--
+        <div class="three"></div>
       </div>
     </div>
   </body>
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md
index f2cee52066..c92c2720d9 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69987
+id: 60a3e3396c7b40068ad69988
 title: Step 30
 challengeType: 0
 dashedName: step-30
@@ -7,31 +7,22 @@ dashedName: step-30
 
 # --description--
 
-You don't always have to use pixels when sizing an element.
-
-Create a new rule, `.three`, and set its `width` to `91%`.
+Set the `height` of `.three` to `28%`.
 
 # --hints--
 
-You should use the `.three` selector.
+You should set the `height` property to `28%`.
 
 ```js
-const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
-assert(hasThree);
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
 ```
 
-You should set the `width` property to `91%`.
+Your `.three` element should have a `height` value of `28%`.
 
 ```js
-const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
-assert(hasWidth);
-```
-
-Your `.three` element should have a `width` value of `91%`.
-
-```js
-const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
-assert(threeWidth === '91%');
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
 ```
 
 # --seed--
@@ -57,7 +48,7 @@ assert(threeWidth === '91%');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
@@ -67,10 +58,12 @@ assert(threeWidth === '91%');
   margin: auto;
 }
 
+.three {
+  width: 91%;
 --fcc-editable-region--
 
 --fcc-editable-region--
-
+}
 ```
 
 ```html
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md
index 8003e02796..0b495c7553 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69988
+id: 60a3e3396c7b40068ad69989
 title: Step 31
 challengeType: 0
 dashedName: step-31
@@ -7,22 +7,22 @@ dashedName: step-31
 
 # --description--
 
-Set the `height` of `.three` to `28%`.
+Change the `background-color` of `.three` to `#b20403`.
 
 # --hints--
 
-You should set the `height` property to `28%`.
+You should set the `background-color` property to `#b20403`.
 
 ```js
-const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
-assert(hasHeight);
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
 ```
 
-Your `.three` element should have a `height` value of `28%`.
+Your `.three` element should have a `background-color` value of `#b20403`.
 
 ```js
-const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
-assert(threeHeight === '28%');
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
 ```
 
 # --seed--
@@ -48,7 +48,7 @@ assert(threeHeight === '28%');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
@@ -60,6 +60,7 @@ assert(threeHeight === '28%');
 
 .three {
   width: 91%;
+  height: 28%;
 --fcc-editable-region--
 
 --fcc-editable-region--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md
index 1d70eb5842..68b9f56132 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69989
+id: 60a3e3396c7b40068ad6998a
 title: Step 32
 challengeType: 0
 dashedName: step-32
@@ -7,22 +7,22 @@ dashedName: step-32
 
 # --description--
 
-Change the `background-color` of `.three` to `#b20403`.
+Center the `.three` element on the canvas by setting its `margin` to `auto`.
 
 # --hints--
 
-You should set the `background-color` property to `#b20403`.
+You should set the `margin` property to `auto`.
 
 ```js
-const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
-assert(hasBackground);
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
 ```
 
-Your `.three` element should have a `background-color` value of `#b20403`.
+Your `.three` element should have a `margin` value of `auto`.
 
 ```js
-const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
-assert(threeBackground === 'rgb(178, 4, 3)');
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
 ```
 
 # --seed--
@@ -48,7 +48,7 @@ assert(threeBackground === 'rgb(178, 4, 3)');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
@@ -61,6 +61,7 @@ assert(threeBackground === 'rgb(178, 4, 3)');
 .three {
   width: 91%;
   height: 28%;
+  background-color: #b20403;
 --fcc-editable-region--
 
 --fcc-editable-region--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md
index 9d1784b812..32ed985885 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad6998a
+id: 60a3e3396c7b40068ad6998b
 title: Step 33
 challengeType: 0
 dashedName: step-33
@@ -7,22 +7,26 @@ dashedName: step-33
 
 # --description--
 
-Center the `.three` element on the canvas by setting its `margin` to `auto`.
+It's helpful to have your margins push in one direction.
+
+In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
+
+In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
 
 # --hints--
 
-You should set the `margin` property to `auto`.
+You should set the `margin` property to `0 auto 20px`.
 
 ```js
-const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
-assert(marginFilter.length === 2);
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
 ```
 
-Your `.three` element should have a `margin` value of `auto`.
+Your `.two` element should have a `margin` value of `0 auto 20px`.
 
 ```js
-const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
-assert(threeMargin === 'auto');
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
 ```
 
 # --seed--
@@ -48,23 +52,23 @@ assert(threeMargin === 'auto');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
   width: 475px;
   height: 200px;
   background-color: #8f0401;
+--fcc-editable-region--
   margin: auto;
+--fcc-editable-region--
 }
 
 .three {
   width: 91%;
   height: 28%;
   background-color: #b20403;
---fcc-editable-region--
-
---fcc-editable-region--
+  margin: auto;
 }
 ```
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md
index f05d6a986f..39700644fa 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad6998b
+id: 60a3e3396c7b40068ad6998c
 title: Step 34
 challengeType: 0
 dashedName: step-34
@@ -7,26 +7,24 @@ dashedName: step-34
 
 # --description--
 
-It's helpful to have your margins push in one direction.
+The colors and shapes of your painting are too sharp to pass as a Rothko.
 
-In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
-
-In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
+Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
 
 # --hints--
 
-You should set the `margin` property to `0 auto 20px`.
+You should set the `filter` property to `blur(2px)`.
 
 ```js
-const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
-assert(hasMargin);
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
 ```
 
-Your `.two` element should have a `margin` value of `0 auto 20px`.
+Your `.canvas` element should have a `filter` value of `blur(2px)`.
 
 ```js
-const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
-assert(twoMargin === '0px auto 20px');
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
 ```
 
 # --seed--
@@ -39,6 +37,9 @@ assert(twoMargin === '0px auto 20px');
   height: 600px;
   background-color: #4d0f00;
   overflow: hidden;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 
 .frame {
@@ -52,16 +53,14 @@ assert(twoMargin === '0px auto 20px');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
   width: 475px;
   height: 200px;
   background-color: #8f0401;
---fcc-editable-region--
-  margin: auto;
---fcc-editable-region--
+  margin: 0 auto 20px;
 }
 
 .three {
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md
index b6df1f5290..8e19815afd 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad6998c
+id: 60a3e3396c7b40068ad6998d
 title: Step 35
 challengeType: 0
 dashedName: step-35
@@ -7,24 +7,46 @@ dashedName: step-35
 
 # --description--
 
-The colors and shapes of your painting are too sharp to pass as a Rothko.
+Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
 
-Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
+Here's an example of a rule that increases the `blur` of two elements:
+
+```css
+h1, p {
+  filter: blur(3px);
+}
+```
 
 # --hints--
 
-You should set the `filter` property to `blur(2px)`.
+You should have a `.one, .two` selector.
 
 ```js
-const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
-assert(hasFilter);
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
 ```
 
-Your `.canvas` element should have a `filter` value of `blur(2px)`.
+You should set the `filter` property to `blur(1px)`.
 
 ```js
-const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
-assert(canvasFilter === 'blur(2px)');
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+Your `.one` element should have a `filter` value of `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+Your `.two` element should have a filter value of `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
 ```
 
 # --seed--
@@ -37,9 +59,7 @@ assert(canvasFilter === 'blur(2px)');
   height: 600px;
   background-color: #4d0f00;
   overflow: hidden;
---fcc-editable-region--
-
---fcc-editable-region--
+  filter: blur(2px);
 }
 
 .frame {
@@ -53,7 +73,7 @@ assert(canvasFilter === 'blur(2px)');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
@@ -63,6 +83,10 @@ assert(canvasFilter === 'blur(2px)');
   margin: 0 auto 20px;
 }
 
+--fcc-editable-region--
+
+--fcc-editable-region--
+
 .three {
   width: 91%;
   height: 28%;
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md
index b8fe44285d..88f4f7eccf 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad6998d
+id: 60a3e3396c7b40068ad6998e
 title: Step 36
 challengeType: 0
 dashedName: step-36
@@ -7,46 +7,22 @@ dashedName: step-36
 
 # --description--
 
-Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
-
-Here's an example of a rule that increases the `blur` of two elements:
-
-```css
-h1, p {
-  filter: blur(3px);
-}
-```
+Increase the `blur` of `.three` by 2 pixels.
 
 # --hints--
 
-You should have a `.one, .two` selector.
+You should set the `filter` property to `blur(2px)`.
 
 ```js
-const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
-assert(oneTwo);
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
 ```
 
-You should set the `filter` property to `blur(1px)`.
+Your `.three` element should have a `filter` value of `blur(2px)`.
 
 ```js
-const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
-assert(hasFilter)
-```
-
-Your `.one` element should have a `filter` value of `blur(1px)`.
-
-```js
-const one = document.querySelector('.one');
-const oneFilter = getComputedStyle(one).filter;
-assert(oneFilter === 'blur(1px)');
-```
-
-Your `.two` element should have a filter value of `blur(1px)`.
-
-```js
-const two = document.querySelector('.two');
-const twoFilter = getComputedStyle(two).filter;
-assert(twoFilter === 'blur(1px)');
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
 ```
 
 # --seed--
@@ -73,7 +49,7 @@ assert(twoFilter === 'blur(1px)');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
 }
 
 .two {
@@ -83,15 +59,18 @@ assert(twoFilter === 'blur(1px)');
   margin: 0 auto 20px;
 }
 
---fcc-editable-region--
-
---fcc-editable-region--
+.one, .two {
+  filter: blur(1px);
+}
 
 .three {
   width: 91%;
   height: 28%;
   background-color: #b20403;
   margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 ```
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md
index 7d13899e41..388ef5f683 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad6998e
+id: 60a3e3396c7b40068ad6998f
 title: Step 37
 challengeType: 0
 dashedName: step-37
@@ -7,22 +7,24 @@ dashedName: step-37
 
 # --description--
 
-Increase the `blur` of `.three` by 2 pixels.
+The rectangles are too small and their edges don't have the soft quality of a painting.
+
+Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
 
 # --hints--
 
-You should set the `filter` property to `blur(2px)`.
+You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
 
 ```js
-const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
-assert(filterFilter.length === 2);
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
 ```
 
-Your `.three` element should have a `filter` value of `blur(2px)`.
+Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
 
 ```js
-const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
-assert(threeFilter === 'blur(2px)');
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
 ```
 
 # --seed--
@@ -49,7 +51,10 @@ assert(threeFilter === 'blur(2px)');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 
 .two {
@@ -68,9 +73,7 @@ assert(threeFilter === 'blur(2px)');
   height: 28%;
   background-color: #b20403;
   margin: auto;
---fcc-editable-region--
-
---fcc-editable-region--
+  filter: blur(2px);
 }
 ```
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md
index 44be152c9c..ea553f86d8 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad6998f
+id: 60a3e3396c7b40068ad69990
 title: Step 38
 challengeType: 0
 dashedName: step-38
@@ -7,24 +7,22 @@ dashedName: step-38
 
 # --description--
 
-The rectangles are too small and their edges don't have the soft quality of a painting.
-
-Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
 
 # --hints--
 
-You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
 
 ```js
-const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
 assert(hasBoxShadow);
 ```
 
-Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
 
 ```js
-const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
-assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
 ```
 
 # --seed--
@@ -51,10 +49,8 @@ assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
---fcc-editable-region--
-
---fcc-editable-region--
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
 }
 
 .two {
@@ -62,6 +58,9 @@ assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
   height: 200px;
   background-color: #8f0401;
   margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 
 .one, .two {
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md
index a579d3f207..05a4325ace 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69990
+id: 60a3e3396c7b40068ad69991
 title: Step 39
 challengeType: 0
 dashedName: step-39
@@ -7,22 +7,22 @@ dashedName: step-39
 
 # --description--
 
-Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
+Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
 
 # --hints--
 
-You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
+You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
 
 ```js
-const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
 assert(hasBoxShadow);
 ```
 
-Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
+Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
 
 ```js
-const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
-assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
 ```
 
 # --seed--
@@ -49,7 +49,7 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
   box-shadow: 0 0 3px 3px #efb762;
 }
 
@@ -58,9 +58,7 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
   height: 200px;
   background-color: #8f0401;
   margin: 0 auto 20px;
---fcc-editable-region--
-
---fcc-editable-region--
+  box-shadow: 0 0 3px 3px #8f0401;
 }
 
 .one, .two {
@@ -73,6 +71,9 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
   background-color: #b20403;
   margin: auto;
   filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 ```
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md
index e5fa40d1e0..9730b8ec7d 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69991
+id: 60a3e3396c7b40068ad69992
 title: Step 40
 challengeType: 0
 dashedName: step-40
@@ -7,22 +7,24 @@ dashedName: step-40
 
 # --description--
 
-Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
+The corners of each rectangle are still too sharp.
+
+Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
 
 # --hints--
 
-You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+You should set the `border-radius` property to `9px`.
 
 ```js
-const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
-assert(hasBoxShadow);
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
 ```
 
-Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+Your `.one` element should have a `border-radius` value of `9px`.
 
 ```js
-const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
-assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
 ```
 
 # --seed--
@@ -49,8 +51,11 @@ assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
   box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 
 .two {
@@ -71,9 +76,7 @@ assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
   background-color: #b20403;
   margin: auto;
   filter: blur(2px);
---fcc-editable-region--
-
---fcc-editable-region--
+  box-shadow: 0 0 5px 5px #b20403;
 }
 ```
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md
index df7065a3e7..5d884e9b4f 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69992
+id: 60a3e3396c7b40068ad69993
 title: Step 41
 challengeType: 0
 dashedName: step-41
@@ -7,24 +7,22 @@ dashedName: step-41
 
 # --description--
 
-The corners of each rectangle are still too sharp.
-
-Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
+Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`.
 
 # --hints--
 
-You should set the `border-radius` property to `9px`.
+You should set the `border-radius` property to `8px 10px`.
 
 ```js
-const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
 assert(hasBorderRadius);
 ```
 
-Your `.one` element should have a `border-radius` value of `9px`.
+Your `.two` element should have a `border-radius` value of `8px 10px`.
 
 ```js
-const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
-assert(oneBorderRadius === '9px');
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
 ```
 
 # --seed--
@@ -51,11 +49,9 @@ assert(oneBorderRadius === '9px');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
   box-shadow: 0 0 3px 3px #efb762;
---fcc-editable-region--
-
---fcc-editable-region--
+  border-radius: 9px;
 }
 
 .two {
@@ -64,6 +60,9 @@ assert(oneBorderRadius === '9px');
   background-color: #8f0401;
   margin: 0 auto 20px;
   box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 
 .one, .two {
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md
index 664ff6c906..8a1b865800 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69993
+id: 60a3e3396c7b40068ad69994
 title: Step 42
 challengeType: 0
 dashedName: step-42
@@ -7,22 +7,24 @@ dashedName: step-42
 
 # --description--
 
-Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`.
+The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+
+Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
 
 # --hints--
 
-You should set the `border-radius` property to `8px 10px`.
+You should set the `border-radius` property to `30px 25px 60px 12px`.
 
 ```js
-const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
 assert(hasBorderRadius);
 ```
 
-Your `.two` element should have a `border-radius` value of `8px 10px`.
+Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
 
 ```js
-const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
-assert(twoBorderRadius === '8px 10px');
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
 ```
 
 # --seed--
@@ -49,7 +51,7 @@ assert(twoBorderRadius === '8px 10px');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
   box-shadow: 0 0 3px 3px #efb762;
   border-radius: 9px;
 }
@@ -60,9 +62,7 @@ assert(twoBorderRadius === '8px 10px');
   background-color: #8f0401;
   margin: 0 auto 20px;
   box-shadow: 0 0 3px 3px #8f0401;
---fcc-editable-region--
-
---fcc-editable-region--
+  border-radius: 8px 10px;
 }
 
 .one, .two {
@@ -76,6 +76,9 @@ assert(twoBorderRadius === '8px 10px');
   margin: auto;
   filter: blur(2px);
   box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 ```
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md
index 1e3ddecdc5..6cc6d086d7 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69994
+id: 60a3e3396c7b40068ad69995
 title: Step 43
 challengeType: 0
 dashedName: step-43
@@ -7,24 +7,24 @@ dashedName: step-43
 
 # --description--
 
-The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+Rotate each rectangle to give them more of an imperfect, hand-painted look.
 
-Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
+Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
 
 # --hints--
 
-You should set the `border-radius` property to `30px 25px 60px 12px`.
+You should set the `transform` property to `rotate(-0.6deg)`.
 
 ```js
-const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
-assert(hasBorderRadius);
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
 ```
 
-Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
+Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
 
 ```js
-const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
-assert(threeBorderRadius === '30px 25px 60px 12px');
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
 ```
 
 # --seed--
@@ -51,9 +51,12 @@ assert(threeBorderRadius === '30px 25px 60px 12px');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
   box-shadow: 0 0 3px 3px #efb762;
   border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 
 .two {
@@ -76,9 +79,7 @@ assert(threeBorderRadius === '30px 25px 60px 12px');
   margin: auto;
   filter: blur(2px);
   box-shadow: 0 0 5px 5px #b20403;
---fcc-editable-region--
-
---fcc-editable-region--
+  border-radius: 30px 25px 60px 12px;
 }
 ```
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md
index 09f4b8fcc4..a7e7262137 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69995
+id: 60a3e3396c7b40068ad69996
 title: Step 44
 challengeType: 0
 dashedName: step-44
@@ -7,24 +7,22 @@ dashedName: step-44
 
 # --description--
 
-Rotate each rectangle to give them more of an imperfect, hand-painted look.
-
-Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
+Rotate the `.two` element clockwise by 0.4 degrees.
 
 # --hints--
 
-You should set the `transform` property to `rotate(-0.6deg)`.
+You should set the `transform` property to `rotate(0.4deg)`.
 
 ```js
-const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
 assert(hasTransform);
 ```
 
-Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
+Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
 
 ```js
-const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
-assert(oneTransform === 'rotate(-0.6deg)');
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
 ```
 
 # --seed--
@@ -51,12 +49,10 @@ assert(oneTransform === 'rotate(-0.6deg)');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
   box-shadow: 0 0 3px 3px #efb762;
   border-radius: 9px;
---fcc-editable-region--
-
---fcc-editable-region--
+  transform: rotate(-0.6deg);
 }
 
 .two {
@@ -66,6 +62,9 @@ assert(oneTransform === 'rotate(-0.6deg)');
   margin: 0 auto 20px;
   box-shadow: 0 0 3px 3px #8f0401;
   border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 
 .one, .two {
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md
index 3536e3fa0a..827101ce8f 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md
@@ -1,5 +1,5 @@
 ---
-id: 60a3e3396c7b40068ad69996
+id: 60a3e3396c7b40068ad69997
 title: Step 45
 challengeType: 0
 dashedName: step-45
@@ -7,22 +7,24 @@ dashedName: step-45
 
 # --description--
 
-Rotate the `.two` element clockwise by 0.4 degrees.
+Rotate `.three` counter clockwise by 0.2 degrees.
+
+With this final step, your Rothko painting is now complete.
 
 # --hints--
 
-You should set the `transform` property to `rotate(0.4deg)`.
+You should set the `transform` property to `rotate(-0.2deg)`.
 
 ```js
-const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
 assert(hasTransform);
 ```
 
-Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
+Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
 
 ```js
-const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
-assert(twoTransform === 'rotate(0.4deg)');
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
 ```
 
 # --seed--
@@ -49,7 +51,7 @@ assert(twoTransform === 'rotate(0.4deg)');
   width: 425px;
   height: 150px;
   background-color: #efb762;
-  margin: 20px auto 20px;
+  margin: 20px auto;
   box-shadow: 0 0 3px 3px #efb762;
   border-radius: 9px;
   transform: rotate(-0.6deg);
@@ -62,9 +64,7 @@ assert(twoTransform === 'rotate(0.4deg)');
   margin: 0 auto 20px;
   box-shadow: 0 0 3px 3px #8f0401;
   border-radius: 8px 10px;
---fcc-editable-region--
-
---fcc-editable-region--
+  transform: rotate(0.4deg);
 }
 
 .one, .two {
@@ -79,6 +79,9 @@ assert(twoTransform === 'rotate(0.4deg)');
   filter: blur(2px);
   box-shadow: 0 0 5px 5px #b20403;
   border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
 }
 ```
 
@@ -101,3 +104,77 @@ assert(twoTransform === 'rotate(0.4deg)');
   </body>
 </html>
 ```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md
deleted file mode 100644
index 6ede70221f..0000000000
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-id: 60a3e3396c7b40068ad69997
-title: Step 46
-challengeType: 0
-dashedName: step-46
----
-
-# --description--
-
-Rotate `.three` counter clockwise by 0.2 degrees.
-
-With this final step, your Rothko painting is now complete.
-
-# --hints--
-
-You should set the `transform` property to `rotate(-0.2deg)`.
-
-```js
-const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
-assert(hasTransform);
-```
-
-Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
-
-```js
-const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
-assert(threeTransform === 'rotate(-0.2deg)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```css
-.canvas {
-  width: 500px;
-  height: 600px;
-  background-color: #4d0f00;
-  overflow: hidden;
-  filter: blur(2px);
-}
-
-.frame {
-  border: 50px solid black;
-  width: 500px;
-  padding: 50px;
-  margin: 20px auto;
-}
-
-.one {
-  width: 425px;
-  height: 150px;
-  background-color: #efb762;
-  margin: 20px auto 20px;
-  box-shadow: 0 0 3px 3px #efb762;
-  border-radius: 9px;
-  transform: rotate(-0.6deg);
-}
-
-.two {
-  width: 475px;
-  height: 200px;
-  background-color: #8f0401;
-  margin: 0 auto 20px;
-  box-shadow: 0 0 3px 3px #8f0401;
-  border-radius: 8px 10px;
-  transform: rotate(0.4deg);
-}
-
-.one, .two {
-  filter: blur(1px);
-}
-
-.three {
-  width: 91%;
-  height: 28%;
-  background-color: #b20403;
-  margin: auto;
-  filter: blur(2px);
-  box-shadow: 0 0 5px 5px #b20403;
-  border-radius: 30px 25px 60px 12px;
---fcc-editable-region--
-
---fcc-editable-region--
-}
-```
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Rothko</title>
-    <link href="./styles.css" rel="stylesheet">
-  </head>
-  <body>
-    <div class="frame">
-      <div class="canvas">
-        <div class="one"></div>
-        <div class="two"></div>
-        <div class="three"></div>
-      </div>
-    </div>
-  </body>
-</html>
-```
-
-## --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Rothko</title>
-    <link href="./styles.css" rel="stylesheet">
-  </head>
-  <body>
-    <div class="frame">
-      <div class="canvas">
-        <div class="one"></div>
-        <div class="two"></div>
-        <div class="three"></div>
-      </div>
-    </div>
-  </body>
-</html>
-```
-
-```css
-.canvas {
-  width: 500px;
-  height: 600px;
-  background-color: #4d0f00;
-  overflow: hidden;
-  filter: blur(2px);
-}
-
-.frame {
-  border: 50px solid black;
-  width: 500px;
-  padding: 50px;
-  margin: 20px auto;
-}
-
-.one {
-  width: 425px;
-  height: 150px;
-  background-color: #efb762;
-  margin: 20px auto 20px;
-  box-shadow: 0 0 3px 3px #efb762;
-  border-radius: 9px;
-  transform: rotate(-0.6deg);
-}
-
-.two {
-  width: 475px;
-  height: 200px;
-  background-color: #8f0401;
-  margin: 0 auto 20px;
-  box-shadow: 0 0 3px 3px #8f0401;
-  border-radius: 8px 10px;
-  transform: rotate(0.4deg);
-}
-
-.one, .two {
-  filter: blur(1px);
-}
-
-.three {
-  width: 91%;
-  height: 28%;
-  background-color: #b20403;
-  margin: auto;
-  filter: blur(2px);
-  box-shadow: 0 0 5px 5px #b20403;
-  border-radius: 30px 25px 60px 12px;
-  transform: rotate(-0.2deg);
-}
-```