Issue with margins at the top of section container

[GCHQ-Developer-485]

Summary of the bug

Tell us, in a few words, what the problem is. The vertical margin at the top of the section container on the website does not change size at different breakpoints - it is always stuck at 16px.

The page header also has a vertical margin at the bottom of it that creates an unnecessary gap between the page header and section container

🪜 How to reproduce

See code and use the inspect function on side navigation component page for an example

📸 Screenshots or code

This is the table which contains the margins which should be implemented for section container

🖥 📱 Device

• Type: Desktop

• Device: MacBook

• Browser version: Safari 17.3

🧐 Expected behaviour

Tell us, in enough detail, what you expected to happen instead.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given that the section container changes size across different breakpoints When extra small sizes are chosen or extra large sizes Then the vertical margin should be less or greater than 16px respectively

Given the page header is used on the website When it is displayed alongside other components below it Then there should not be an unnecessary margin of 24px

Additional info

Tell us anything else useful to help us fix or understand the problem.

[GCHQ-Developer-485]

[GCHQ-Developer-465]

This should be discussed with designers and the designs of the site should be reviewed. Will remove from the PR checklist work.

[MI6-255]

What is the fix? Putting into design for that answer