Fixes for CSS Flexbox challenges (#34420)

* Make property names monospace

Property names as monospace would be more fitting to this challenge.

* Add default value for align-items

According to the standard, the default value for align-items, if it is not specified, is stretch.
Source: https://www.w3schools.com/cssref/css3_pr_align-items.asp

* Add monospace font for code elements

These elements need to be in a monospace font.

curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md

@@ -11,7 +11,7 @@ The <code>align-items</code> property is similar to <code>justify-content</code>
 Flex containers also have a <strong>cross axis</strong> which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
 CSS offers the <code>align-items</code> property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.
 The different values available for <code>align-items</code> include:
-<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.</li><li><code>center</code>: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).</li><li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.</li><li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li></ul>
+<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.</li><li><code>center</code>: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).</li><li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no <code>align-items</code> value is specified.</li><li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li></ul>
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md

@@ -9,12 +9,12 @@ videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
 <section id='description'>
 Adding <code>display: flex</code> to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the <code>flex-direction</code> property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
 Other options for <code>flex-direction</code> are row-reverse and column-reverse.
-<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is row.
+<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is <code>row</code>.
 </section>
 
 ## Instructions
 <section id='instructions'>
-Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row-reverse.
+Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of <code>row-reverse</code>.
 </section>
 
 ## Tests

curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.english.md

@@ -20,7 +20,7 @@ Add the CSS property <code>justify-content</code> to the header's <code>.profile
 
 ```yml
 tests:
-  - text: 'The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.'
+  - text: 'The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: <code>center</code>, <code>flex-start</code>, <code>flex-end</code>, <code>space-between</code>, or <code>space-around</code>.'
     testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), ''The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.'');'
 
 ```