Use margin instead of padding to line up navigation

Alternative option.

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;