Align Header items with content in Fluid Engine grid below

I am trying to get the logo and the navigation within my header to align with the content in the grid below.

As you can see I have a boxy style with my images and when the screen size is below 1200px this works perfectly but how can I get the header to be in this alignment when the screen size is above 1200px?
 

https://juliajeckell.squarespace.com/

Password: juliajeckell

Thank you in advance

2 hours ago, kathrynnicoledesigns said:

I am trying to get the logo and the navigation within my header to align with the content in the grid below.

As you can see I have a boxy style with my images and when the screen size is below 1200px this works perfectly but how can I get the header to be in this alignment when the screen size is above 1200px?
 

https://juliajeckell.squarespace.com/

Password: juliajeckell

 

Thank you in advance

I check that it is fine now.

Have you figured it out?

15 minutes ago, Beyondspace said:

I check that it is fine now.

Have you figured it out?

No, I want the header to align with the edges as per the 1st image, not the 2nd.

25 minutes ago, kathrynnicoledesigns said:

No, I want the header to align with the edges as per the 1st image, not the 2nd.

Is it what you mean?

Try adding to Home > Design > Custom Css

#collection-63790d581ee9237d631fabfc .header .header-announcement-bar-wrapper {
  box-sizing: border-box;
  width: calc(min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2)));
  margin: 0 auto;
  padding-left:0;
  padding-right:0;
}

Hope it makes sense

Support me by pressing 👍  or marking as solution if this useful for you

20 minutes ago, Beyondspace said:

Is it what you mean?

Try adding to Home > Design > Custom Css

#collection-63790d581ee9237d631fabfc .header .header-announcement-bar-wrapper {
  box-sizing: border-box;
  width: calc(min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2)));
  margin: 0 auto;
  padding-left:0;
  padding-right:0;
}

Hope it makes sense

Support me by pressing 👍  or marking as solution if this useful for you

That is what I mean but when I add this to the CSS I'm getting this error, "Operation on an invalid type". Any ideas what this means?

1 minute ago, kathrynnicoledesigns said:

That is what I mean but when I add this to the CSS I'm getting this error, "Operation on an invalid type". Any ideas what this means?

I have added this into the header though in a style tag and removed the id and this has worked

<style>

  .header .header-announcement-bar-wrapper {
  box-sizing: border-box;
  width: calc(min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2)));
  margin: 0 auto;
  padding-left:0;
  padding-right:0;
}
  
</style>