Change header content centering; Fix header logo overlapping; Simplify header spacing rules

Add minimum width of 20em or 320px so content won't render narrower (as a mess)

Header text and logo will only center for devices narrower than 1024px wide

Simply header spacing rules so rules to move content below fixed header are not scattered amongst many different elements
Centralized in .site-container: padding-top rule
Removed scattered padding rules from .content and #home-top

Handle spacing for home page text in .home-top .wrap rule and remove spacing from #home-top .widget_text h2

Set explicit height on fixed centered header widget-area to prevent div from expanding around logo overlapping content and preventing hovering/clicking main content
Decrease menu item padding slightly at 800px media query instead of 680px to prevent menu items dropping to new line in 800px to 680px range

Set header widget-area height back to auto for narrowest devices so it pushes all .site-container content below logo

Replace percentage spacing units with em units at narrowest width
Organize CSS; Remove duplicate and overridden rules

Sort selectors into order of specificity precedence (lowest to highest)
so higher line numbers typically have higher precedence than lower line
numbers
In other words, more general rules earlier in the file, more specific
later

There are some exceptions such as the order of pseudo-classes :visited,
:focus, :hover, :active
Note pair of clearing rules that must be out of alphabetical order
commented

Sort elements first, classes and pseudo-classes second, IDs third, media
query sections last
Within these groups, sort selectors and rule names alphabetically, child
rules later (as more specific)

Remove duplicate and overridden rules