qns/quiz: address user feedback (#488)

packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx

@@ -15,4 +15,4 @@ A BFC is an HTML box that satisfies at least one of the following conditions:
 
 In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
 
-Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
+Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).

packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx

@@ -28,7 +28,39 @@ Note that `margin`s are not counted towards the actual size of the box. It affec
 Look up the `box-sizing` property, which affects how the total heights and widths of elements are calculated.
 
 - `box-sizing: content-box`: This is the default value of `box-sizing` and adheres to the rules above.
-- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border, but not including the margin. This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
+
+  For example:
+
+  ```css
+  .example {
+    box-sizing: content-box;
+    width: 100px;
+    padding: 10px;
+    border: 5px solid black;
+  }
+  ```
+
+  The actual space taken by the `.example` element will be 130px wide (100px width + 10px left padding + 10px right padding + 5px left border + 5px right border).
+
+- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border (but not the margin). This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
+
+  For example:
+
+  ```css
+  .example {
+    box-sizing: border-box;
+    width: 100px;
+    padding: 10px;
+    border: 5px solid black;
+  }
+  ```
+
+  The element will still take up 100px on the page, but the content area will be 70px wide (100px - 10px left padding - 10px right padding - 5px left border - 5px right border).
+
+### Border and Margin Behavior
+
+- **Borders do not collapse or overlap** with those of adjacent elements. Each element’s border is rendered individually.
+- **Margins can collapse**, but only vertically and only between block-level elements. Horizontal margins do not collapse. This means that if one block element has a bottom margin and the next has a top margin, only the larger of the two will be used. This behavior is independent of `box-sizing` and is the default in CSS.
 
 ## References
 

packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx

@@ -4,6 +4,6 @@ title: Have you played around with the new CSS Flexbox or Grid specs?
 
 Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
 
-Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create layouts.
+Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create a variety of layouts.
 
-Grid is by far the most intuitive approach for creating grid-based layouts but browser support is not that wide at the moment. Many layout problems can already be solved with Flexbox, so there's not a huge need for Grid.
+Grid is meant for two-dimensional layouts, giving you full control over both rows and columns. It offers an intuitive and powerful way to create complex grid-based designs directly in CSS, often with less code and more flexibility than older techniques. Browser support for Grid is now strong across all major modern browsers, making it a solid option for layout design in most projects.

packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx

@@ -21,4 +21,4 @@ For a complete list of values for the `display` property, refer to [CSS Display
 
 ## References
 
-- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+- [CSS Display | MDN](https://developer.mozilla.org/docs/Web/CSS/display)