From 45155f68ec4ee5ab076b29a69590a58ca52d4006 Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie@frankieroberto.com>
Date: Fri, 27 Sep 2024 09:47:04 +0100
Subject: [PATCH] Use margin instead of padding to line up navigation

Alternative option.
---
 packages/components/header/_header.scss | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
index d9f7a36fd..e9bcb1e44 100644
--- a/packages/components/header/_header.scss
+++ b/packages/components/header/_header.scss
@@ -345,12 +345,13 @@
   color: $color_nhsuk-white;
   display: block;
   font-size: inherit;
-  padding: nhsuk-spacing(3) 12px;
+  padding: nhsuk-spacing(3) 0;
+  margin-right: nhsuk-spacing(6);
   text-decoration: underline;
   white-space: nowrap;
 
   @include mq($from: tablet) {
-    padding: 12px nhsuk-spacing(3);
+    padding: 12px 0;
   }
 
   .nhsuk-icon__chevron-right {
@@ -449,17 +450,8 @@
 }
 
 .nhsuk-navigation {
-  /* These negative margins are the same as the padding on the navigation items,
-     and used to align the text of the first and last item with the rest of the header. */
-  margin-left: -12px;
-  margin-right: -12px;
   display: flex;
 
-  @include mq($from: tablet) {
-  /* These padding is slightly more from tablet width upwards. */
-    margin-left: -16px;
-    margin-right: -16px;
-  }
 
   @include mq($until: tablet) {
     position: relative;