Custom Divider Under Header

This is the code I'm using, and I am not a coder- I have been messing with the numbers to adjust them to what I need for other places on my website and it's worked great. However, when I try to add this image as a custom divider at the bottom of my header it's repeating like in the image I attached? Anyone see what I'm doing wrong?

Thank you so much in advance,

Kelly

[data-section-id="header"] {
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(https://static1.squarespace.com/static/6458ed9acc4a6d5fea218463/t/64590a18f51a310b8326a8c8/1683556888991/Ash%27s+rope+updated.png);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    top: 0;
    margin-top: 60px;
    transform: translateY(-100%);
    pointer-events: none!important;
    z-index: 1;
    @media screen and (max-width: 385px) {
      background-size: 200% 50%;
    }
  }
}

Can you share your website URL and site wide password?

The issue may be that [data-section-id="header"] is not a valid selector, for the header you want to use .header, not with the data-section-id. 

https://ashtonspowersportconnection.squarespace.com/

the password is: website 

I so appreciate your help. I have the divider on the home page, but again, it's not the header, so it does not carry across pages. Thank you so much

Thanks for sharing. Did you fix it, I can't see the problem?

Thank you  for responding and helping... I'm not sure why but all of the sudden all of the ropes that I coded in have disappeared. The custom CSS codes are all just as they were, but are not showing up. 

Is there a trick to this?

https://www.ashtonspowersportconnection.com

password: website

Thank you  SO much for your help with everything