This is to help with css flexbox mock ups, and understanding :) -Yours Truly Amber Meador (Lambda TL extraordinaire)

Starter Questions / Things to Do

1. I want to center up the title "Amber's Widget" so it aligns with the rest of the content?

2. I would like the nav 'Things' to be spread edge to edge of the red, and touching it?

3. I would like there to be some space around the red box, so it's not touching/overlapping with any of the other boxes?

4. The images are breaking out of their containers. I want them to fit inside the pink box?

5. The Part 1/2 heading text are against the pink box... I want them away from it about 5 to 10 pixels?

6. I need a footer. I want it to look just like my nav header?

7. I want the overall width a little bigger. Like, maybe 1000px?

8. I'd like the second 'holder1' div to hold 3 smaller containers instead of two... how do I do this?

9. I'd like the border aspect of each of the boxes to go away so I can have a cleaner looking site?

10. What else can I do to make this more streamlined and fancy looking?

LET'S MAKE IT MOBILE !!!!

1. If everything is within the primary css 'container', and all widths are %'s, and you make one media query for container everything shrinks down auto-magically to fit inside :)

2. Now let's make a column out of the first holder instead of having them side by side ?

3. Let's lign everything up again. Space out holder1a for the new 'column' view and make sure nothing is overlapping

4. Let's make a new image class, and one image will shrink to fit, and the other will display none on the tablet view?

FINISH !!!

Solution code will be in the solution branch for you guys :)