"Skip to main content" link skips over content that is essential to the page, banner role should be for global content

Problem/Motivation

On admin pages, the header element containing the breadcrumb nav, h1, and (occasionally) primary tabs is located outside of the main landmark. This causes a few accessibility issues:

1. Because it's a header element not contained in another landmark, it's interpreted as a "banner" by screen readers. A "banner" landmark should be only used for repetitive, site-oriented content – not content that's specific to the page. (reference: https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/banner.html)
2. Because the "Skip to main content" link moves focus to the main element, it skips over this header even though it's essential to the page (not global content).

Steps to reproduce

Using a screen reader, hit enter on the "Skip to main content" link on a logged-in page -- for example, the page for editing your profile. Notice how the screen reader focus skips over the h1 with your username, "View"/"Shortcuts"/"Edit" links, and breadcrumb nav.

Proposed resolution

1. Change <main class="page-content ..."> to a <div class="page-content ...">
2. Put a <main> around the <header class="content-header clearfix"> and the <div class="layout-container"></div> that contains the page content.
3. Move <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div> to be the first child of the new <main>.

User interface changes

"Skip to main content" link jumps to page-specific header.