Map page layout fixes

[gsehrlich]

Checklist

• [x] Add description
• [x] Reference the open issue that the pull request addresses
• [x] Pass code quality checks
  • spin up docker docker-compose up -d --build
  • enter api container docker-compose exec api /bin/bash
  • run api tests make validate
  • exit container ctrl/command+D or exit
  • enter web container docker-compose exec web /bin/sh
  • run front-end tests npm run test or npx jest
  • lint npm run lint-fix
  • exit container as above
• [x] Request code review
  • Please allow 36 hours from opening a pull request before merging a pull request- even if it has already received an approving review.
• [ ] Address comments on code and resolve requested changes
• [ ] Merge own code

Description

Issue: #494

Brief description of solution

• [x] Use Semantic UI more/better
  • [x] Remove redundant nested Containers
  • [x] Switch out plain HTML components for Semantic UI components
  • [x] Eliminate unnecessary CSS
  • [ ] Do more of this
• [x] Square map box
  • [x] Use a CSS trick for constant aspect ratio https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
  • [x] Replace the Semantic UI Grid.Columns with a regular flexbox and set the column widths appropriately
  • [x] Figure out how to accomplish the same with Semantic UI
• [x] Create footer
  • [x] Use Semantic UI React Menu
  • [x] Change App.js styles so that footer is at the bottom of the page even if the content is shorter
  • [x] Add logos
• [x] Remove grid container's negative margin
• [ ] Move nav items up
• [ ] Logo fixes
• [ ] Font fixes