Header container responds differently to width container

[paulrobertlloyd]

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):

  

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

  

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

  

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

  

• 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