Nav header wraps poorly at certain widths

[gosko]

When I resize my desktop browser to be narrower, the 'My account' text and icon get truncated at certain widths.

This only happens when signed in to a W3C account (when the text reads 'My account'), not when signed out (when the text reads 'Sign in')

Also at narrower widths (as in the second screenshot above), it feels like there is way too much space between the logo and the first menu item (Standards), and slightly too much even at wider widths (approx 208 pixels between the logo and Standards, but only 156 pixels between the magnifying glass and 'Sign in')

I think it would look better if the nav items and magnifying glass were moved to the left a bit, as they were before the logo update.

Removing the margin-inline-start: 3em from this part of the CSS seems to resolve the issue:

@media screen and (min-width: 70em) {
  .global-nav__inner > ul {
    flex-basis: auto;
    flex-wrap: nowrap;
    margin-inline-start: 3em;
    padding-bottom: 0;
  }
}

It also fixes another minor issue I hadn't noticed before: the 'My account' icon is not right-aligned with the site translation links above.

[NicolaSaunders]

The issues raised were fixed by pull request 165 but were then overwritten when pull request 177 was merged in afterwards (because 177 had the work from 165 prior to the fixes). We'll have to open up another branch and re-address.