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?