Box Alignment Lab

Easy
21
89.1% Acceptance

In this lab, we will create a simple layout using flexbox. First, you will create a container div with the class 'container' that will hold our boxes. Inside the container, you will create four boxes with the class 'box', each containing a number (1, 2, 3, 4).

You will then apply 25px of padding to the container using the CSS padding property. After that, give each box a dimension of 50px by 50px and a solid border of 3px using the width, height, and border properties.

Lastly, you will use the Flexbox properties display: flex and justify-content: space-evenly to align the boxes evenly inside the container. Additionally, you will make the boxes wrap to a new line if the screen width goes below 200px.