Img as logo[position:absolute] keeps jumping around depending on screen size

Site URL: https://koala-khaki-5ap9.squarespace.com/

Hi everyone, 

I have a problem with my img logo. I've positioned it according to my screen size but have noticed that on slightly smaller/larger screens the logo jumps around and ends up outside of the white nav container. My goal is to have it sit in the same position according to the nav bar (serifs of the font just above the bottom part of white nav container) at all times.

I have been struggling with this for a while and am looking for some help. 

Link to site: https://koala-khaki-5ap9.squarespace.com/
PW: lbl (as in, LBL but no caps)

I'm currently using the following code to position it but may have missed something critical, or perhaps what I want isn't even possible.
 

.header-title {
  position: absolute;
  top: -2rem;
  .header-title-logo {
    width: 200px;
    height: 200px;
    a { 
      max-height: 200px;
      height: 200px;
      width: 200px;
      img {
        max-height: 200px;
      }
    }
  }
}

I'm still learning my way around SQS and sometimes finding the right container to target is a bit tricky (even with two collection/block/id Chrome extensions). 

Any help would be immensely appreciated!

/Frankemon

Hi. Do you still need help on this?

@tuanphan Hi Tuan, thanks for replying. Yes! I am still really struggling with this so any help would be much appreciated.

So far I have been trying to manipulate the img, but am wondering if there are other ways? Manipulating the white nav bar instead maybe or something like that. I haven't been able to figure it out yet!

@tuanphan I got it sorted, nevermind!