Nested Box Layout Assignment

Create a nested box layout using HTML and CSS that visually represents the structure of the box model.

Background Colors:

• Outermost Box: Light Coral (#F08080)
• Border Box: Pale Turquoise (#AFEEEE)
• Padding Box: Pale Green (#98FB98)
• Content Box: Sky Blue (#87CEEB)

Required CSS Properties:

• margin: Apply to create space around the outermost box.
• border: Define on the border box to simulate a border.
• padding: Use on the padding box to create space around the content box.
• background-color: Assign to each box for visual distinction.
• width and height: Optionally specify for each box or use default content size.
• box-sizing: Set to border-box to include padding and border in the element’s total width and height.

HTML Structure:

• Use <div> elements nested within each other.

Deliverable:

A static HTML page with a responsive nested box design that maintains the visual hierarchy on different screen sizes.

Ensure that your final design is centered on the page and that each box is clearly distinguishable with the specified background colors. This exercise will help you understand how to use CSS to style elements and manage layout with the box model.