Align Header with left and right margins of content below

I am trying to align my site header to the left and right edges of the site content below. So far I have been able to get the left side aligned using: 

.header-title-nav-wrapper .header-title {
  margin-left: 450px;
}

But that doesn't seem to work when I replace left and right. Any help would be greatly appreciated!

Site is: https://fennel-hawk-mrbl.squarespace.com/
PW: GAU

You should have more luck if you use percent instead of pixels:

@media only screen and (min-width:768px) {
  .header-title-nav-wrapper .header-title {
    margin-left: 25%;
  }
}
@media only screen and (max-width:767px) {
  .header-title-nav-wrapper .header-title {
    margin-left: 0%;
  }
}

Since the content width is 50% then 25% margin on the left should work nicely. That's not wat you want on mobile so I've added a media query so the code only affects the desktop version, and the mobile version is at 0%.

Thank you! but how can I affect the right hand margin so that "selected works" and "about" are aligned with the right hand side of the image?

Here's some updated code:

@media only screen and (min-width:768px) {
  .header-title-nav-wrapper .header-title {
    margin-left: 25%;
  }
  .header-layout-nav-right .header-nav-list {
    margin-right: 24vw;
  }
}
@media only screen and (max-width:767px) {
  .header-title-nav-wrapper .header-title {
    margin-left: 0%;
  }
}

Perfect-thanks!