The assignment is to add the six prior presidents to it.

HTML:

21st Century US Presidents

21st Century US Presidents

George W. Bush

Barack Obama

Donald Trump

Joseph Biden

CSS:

.wrapper {

display: flex;

flex-wrap: wrap;

background-color: white;

justify-content: center;

width: 50em;

margin: auto;

text-align: center;

line-height: 1.5em;

border: .0625em solid green;

}

h1 {

flex: 1 1 100%;

padding: 2em;

text-align: center;

font-size: 2em;

font-family: 'Courier New', Courier, monospace;

color: blue;

}

h2 {

flex: 1 1 34%;

border: solid .0625em green;

padding: 2em;

text-align: center;

font-family: cursive;

}

.red {

color: red;

text-decoration: line-through;

}

.blue {

color: blue;

}

i {

font-style: italic;

}

Factor your CSS so you don't write unnecessary extra properties (adjust HTML class names, if necessary) (see slide notes on factoring] y Make sure it is flexbox doing the layout work (if you were cheating with margins before) Place presidents into a 3 row matrix on page, lined up as 3-4-3 aligned as shown on next slide. Make sure text all fits on single line. Instead of using flex-grow to fill out horizontal space, leave flex-grow turned off and use justify-content in the flex-container to organize horizontal arrangement of boxes. (don't use horizontal margins at all for best results.) Make background of presidents who resigned or were impeached a light gray. Add px counts to right of ems as CSS comments You may adjust from lab look and feel if you like. Retitle with an accurate title (see mine in comments) There are several different possible aesthetic treatments. See if you can get flexbox to do these two. But you need only submit one of them