Some stylesheet problems and suggestions

[chengluyu]

I was cleaning my GitHub notifications and I saw issue #1. So I reviewed some CSS code and found few problems.

• Add overflow: hidden to ImageContainer. https://github.com/Ideas-Laboratory/EdWordle/blob/dbc0c24202bd9b66ab4d4d8747cd1fa4e3108286/src/pages/home/style.js#L13 This resolves horizontal overflow in the homepage.
• It seems that the NavWrapper use a fixed width. https://github.com/Ideas-Laboratory/EdWordle/blob/dbc0c24202bd9b66ab4d4d8747cd1fa4e3108286/src/common/header/style.js#L14 I recommend using a relative value or specify different values on different screens.
• Font fallbacks are missing. For example, https://github.com/Ideas-Laboratory/EdWordle/blob/dbc0c24202bd9b66ab4d4d8747cd1fa4e3108286/src/common/header/style.js#L26

I also have some general suggestions.

• Use relative units. Compared to absolute unit (e.g. px), relative units (e.g. rem and em) make you design more consistent. You can also get other benefits, for example, you can easily scale up and down your components.
• Use less flex box. I found flex being used everywhere even simple cases. In 50% cases, you can use simpler solution rather than flex.