Page Hero Grid Settings Alter Alignment of SiteWide Headers

Hi, as above really.

I set up the front page Hero from the example given but this has now aligned my sitewide header element to the right.

Example page given (and the homepage)

I think it's this bit of css added that is causing the issue but can't work a way round this.

.inside-page-hero {
display: -ms-grid;
display: grid;
grid-template-areas: "left right";
-ms-grid-columns: 50% 50%;
grid-template-columns: 50% 50%;
}

Thanks in advance.