For each section in this document, complete the challenge as described.
Make the <body> of this document be
800px wide and 90% the width
of the viewport, whichever is smaller. Center the body on the page
no matter how wide the viewport is.
Make the background-color of this document to
#eaf6ff when the viewport width is
640px or more.
Make the <h1> on this page have a
font-size of 1.5rem when the viewport
width is below 500px, and 2.5rem when
the viewport width is above 640px.
Turn the following list into a grid of boxes that wrap horizontally
(side-by-side until they run out of room and wrap to the next line).
Make each <aside> 170px wide, with
a 10px margin. Set the font-size for the
boxes to be 0.8rem. Be sure to remove the bullets
associated with the <li> tags, and remove the
default padding-left on the <ul>.
As above, make a grid of boxes that wrap horizontally. This time,
give each <li> a width of 100%. When the viewport
width is greater than 480px, make each <li> be
50% wide. If the viewport is greater than 640px, make
each <li> be 25% wide. The grid
should be 1-across at small widths, 2-across at medium widths, and
4-across and large widths. Don't set a width on the
<aside> elements, but be sure they have a
10px margin.
Now, set the <ul> to have a
margin of -10px left and right,
1rem top and bottom. What happens?