Grid columns do not align with service name

[edwardhorsford]

I'm working on a service that makes use of a one third / two thirds column grid layout. The first column is filtering, and main content on the right.

At the moment the main content doesn't align with the service name - but it almost does. Enough that it looks like a bug / fault in the code. Would it be possible for these to align?

In other places the header aligns with the grids - such as the GOV.UK search box:

[NickColley]

Hey Ed,

I've made a live example to poke here:

https://govuk-frontend-issue-1112.glitch.me/

Looks to be misaligned since the grid has gutters of 30px whereas the header does not, even though the percentages are consistent.

So if we did something like this I think we can get these to align...

@media (min-width: 48.0625em) {
  .govuk-header__logo,
  .govuk-header__content {
    box-sizing: border-box;
  }
  .govuk-header__logo {
    padding-right: 15px;
  }
  .govuk-header__content {
    padding-left: 15px;
  }
}

[edwardhorsford]

@NickColley thanks for looking at this. That sounds sensible.

A side effect is there's slightly less space for service name in the header - but on mobile they split on to two lines anyway so the impact should be minimal.