Tidy up GOV.UK logo hover and focus states

Address two issues with the hover and focus states for the GOV.UK logo (including product name, when present):

1. When the header includes a product name, the homepage link’s underline (on hover) and the focus state take up an additional 10px on the right hand side, because of the 10px right padding on `govuk-header__product-name`.

This padding is there to ensure there is a gap left between the product name and the menu button [1]. Remove it, and add a 10px margin to `govuk-header__link--homepage` instead which achieves the same result but without adding an additional 10px to the hover and focus states.

2. When the header does not include a product name, the homepage link’s underline (on hover) and the focus state take up an additional 5px on the right hand side, because of a 5px margin on `govuk-header__logotype`.

This margin has been present since the component was added to GOV.UK Frontend, but I believe it’s to ensure there’s a space between GOV.UK and a product name. Remove this margin in favour of a 5px left margin on the product name, so that the margin is only included when there is a product name to show.

[1]: df413cf

src/govuk/components/header/_index.scss

@@ -36,7 +36,6 @@
 
   .govuk-header__logotype {
     display: inline-block;
-    margin-right: govuk-spacing(1);
   }
 
   .govuk-header__logotype-crown {
@@ -57,7 +56,7 @@
   .govuk-header__product-name {
     @include govuk-font($size: 24, $line-height: 1);
     display: inline-table;
-    padding-right: govuk-spacing(2);
+    margin-left: govuk-spacing(1);
   }
 
   .govuk-header__link {
@@ -92,6 +91,7 @@
     @include govuk-font($size: false, $weight: bold);
 
     display: inline-block;
+    margin-right: govuk-spacing(2);
     font-size: 30px; // We don't have a mixin that produces 30px font size
     line-height: 1;