Fix the margin in header-container class

[daniellex0]

Overview

We need to fix the ".header-container" class because for some reason it is no longer providing the correct margin to cover the top nav bar, and most of our headings are now too close to the top nav bar as a result

Action Items

• [x] Try to figure out what went wrong - the .header-container class margin used to cover the whole height of the top nav so that the header-container padding started just below it. Now the margin only covers half of the top nav (see screenshots below). Was a change recently made to cause this? Was the margin recently edited to "margin: 37px auto 0"?
• [x] If the change that caused this can't be figured out/undone, just change the margin property in the ".header-container" class to margin: 61px auto 0; (instead of 37px auto 0) so that the margin once again covers the whole tap nav bar)

".header-container" class margin (orange section below) used to cover the entire top nav bar- now it only covers half.

This needs to be fixed because most of our headers using the standard header class are now too close to the top nav bar:

[arghmatey]

A little update:

I took a look at the classes and scss file for almost all pages (minus 'dashboard' since it looks like that has a different layout). Pages I took a dive into are: About, Events, Wins, Communities of Practice, Credits, Getting Started, Join Us, Program Areas, Project Team Meetings, Sitemap, and Toolkit. Among these, there are a handful of different reasons why the headers are not sitting correctly on their associated page.

This is a good opportunity to fix continuity across the site pages, but it will take a little refactoring.

Observations:

• .header-container is not the sole reason for this issue and its margin numbers haven't been changed in 9 months
• Not all pages have the header-container class assigned, and some pages are farther from the nav bar because of a margin on the h1 element, or padding on another class on the same div as .header-container, etc.
• On the How to create a page on the HfLA website wiki page, the template doesn't include class="header-container", but instead class="header-container--yourPageName".

I think it would be a good idea to move forward with the margin change on .header-container being changed to 61px so it's the same along all pages, and adjust the unchanged pages accordingly to close this issue.

Next Steps:

• [ ] Adjust .header-container and other minor changes to bring the headers farther away from the nav bar.
• [ ] Explore possibility of header template to adjust all pages to, and to keep continuity in the future.

I'll have a pull request ready to close this in the next few days.