Fix negative margin overflowing page in K5 course mobile view
Fix negative margin overflowing page in K5 course mobile view

There was extra margin being applied to the top of the K5 course header
when in the mobile view. This is because the header believed it was
sticking, when it actually was not. This was caused by negative left
margin overflowing the viewport, making the IntersectionObserver which
drives the sticky state think that the header was sticking.

This change modifies the left margin applied by K5 mode so that it uses
the global layout variables, and adds a media query to apply the correct
negative margin amount in the mobile view.

fixes LS-2581
flag=canvas_k6_theme

test plan:
- open a K5 course in mobile view
- observe that the extra top margin shown in the ticket does not appear
- verify that scrolling vertically causes the header to stick as expected,
  and there is no related "jittering"

Change-Id: I1e4f2f596bba0a96e225e4d14ccf5b4bd5d47e5f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/272597
Tested-by: Service Cloud Jenkins <9144042a601061f88f1e1d7a1753ea3e2972119d@instructure.com>
Reviewed-by: Robin Kuss <0b206b54367b2de0334896ea45826f0e3194bd35@instructure.com>
QA-Review: Robin Kuss <0b206b54367b2de0334896ea45826f0e3194bd35@instructure.com>
Product-Review: Isaac Moore <258108225390078ef47d1319acab49ad7948abf1@instructure.com>

sfu/canvas-lms,sfu/canvas-lms,instructure/canvas-lms,sfu/canvas-lms,sfu/canvas-lms,instructure/canvas-lms,instructure/canvas-lms,sfu/canvas-lms,instructure/canvas-lms,sfu/canvas-lms,instructure/canvas-lms,instructure/canvas-lms,instructure/canvas-lms,sfu/canvas-lms