diff --git a/assets/styles/layout.css b/assets/styles/layout.css index 79ae118..29491ba 100644 --- a/assets/styles/layout.css +++ b/assets/styles/layout.css @@ -16,6 +16,7 @@ .layout { max-width: 100%; width: 1200px; + min-width: 0; /* flex child of body: allow shrink so children don’t force page width */ margin: 0 auto; display: flex; flex-grow: 1; @@ -51,9 +52,11 @@ nav a:hover { header { position: fixed; - width: 100vw; - top: 0; + /* Use inset instead of 100vw: 100vw includes the vertical scrollbar and causes horizontal overflow on many viewports. */ left: 0; + right: 0; + top: 0; + width: auto; box-sizing: border-box; } @@ -228,7 +231,9 @@ dt { /* Responsive adjustments */ @media (max-width: 1024px) { - nav, aside { + /* Only the main column nav, not