nhsuk/nhsuk-frontend

Header container responds differently to width container

paulrobertlloyd opened this issue · 0 comments

paulrobertlloyd commented

Bug Report

.nhsuk-header__container introduces different inline margin sizes at different breakpoints from that of .nhsuk-width-container. This means that at certain breakpoints, elements in the header don’t align with other elements on the page.

What is the issue?

Here are a few snapshots taken at different viewport widths

  • Up to 640px, the containers share the same inline margin size (16px):

    NHS header on 640px wide screen.

  • Between 641px and 768px, the header container has an inline margin of 32px while the width container sticks with 16px:

    NHS header on 768px wide screen.

  • Between 769px and 989px, the contains again share the same inline margin size (32px):

    NHS header on 800px wide screen.

  • Above 990px, the header container uses an inline margin of auto while the width container remains sticks with 32px:

    NHS header on 990px wide screen.

  • Above 1024px, max-widths kick in and the containers are aligned again.

What was the environment where this issue occurred?

  • Device: Mac
  • Operating System: macOS Sonoma
  • Browser: Safari
  • Browser version: 17.1
  • NHS.UK frontend package version: 8.0.2