custom-css Navigation Logo Overhang

Site URL: https://cranberry-kale-kent.squarespace.com/config/design/template

I'm trying to do a logo overhang so it shows on top of the first section. I've attached what it currently looks like, and the code I'm using that does not work for me. As you can see, the logo (cursive FP) on the left is cut off. Is there also a way to make the padding of the navigation smaller? Can someone help?

I originally had the background of the first section transparent so that the padding could be smaller on the bottom, but I still couldn't get the overhang to work and then the background behind the text was an off white instead of all white. I'd like the navigation padding to be smaller, almost similar to the announcement bar, and then have the logo overhang on the picture/first section. Help!! I'm using the Mojave template. Link below. 

https://cranberry-kale-kent.squarespace.com/config/design/custom-css

What is access password?

@tuanphan password is: thefontparty

Add to Home > Design > Custom CSS

.Header-branding-logo {
    max-width: 194px;
    position: relative;
    z-index: 999;
}