Getting the logo to overlap the first section below the header

Well... I got CSS to work like I wanted on mobile (see screenshot attached), but have NO idea why it won't work on larger/desktop screens. Site is (pw: aril)

https://arianaloren.squarespace.com/

Any help or insight is much appreciated!!

To make it works on larger screen, you need to set width for logo

@media screen and (min-width:992px) {
.header-title-logo img, .header-title-logo {
    width: 150px !important;
}
}

You can adjust number 150