conundrum - I can move my logo down to even out page spacing - but burger menu icon stays where it is?

Site URL: https://coconut-grasshopper-b736.squarespace.com/config/pages/632491ecd2457c0d3e60fa0e?p

site password : gingerkev

Hi 

Re tablet - i want to reduce space between logo/burger and text section below - see first pic attached.

If i enter following code.... :

/* header on tablet only */
@media screen and (max-width:991px) and (min-width:768px)  {
.header-title-nav-wrapper {
   margin-bottom: -30px;
}
}

..the logo comes down successfully but burger icon stays where it is...see second pic.

Any ideas how i can get burger down level with logo would be most appreciated!

Thanks

Kev

Add to Design > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.header-display-mobile {
    align-items: baseline;
}
body.homepage article section:first-child {
    padding-top: 120px !important;
}
body.homepage .header-announcement-bar-wrapper {
    padding-bottom: 10px !important;
}
}

Hi Tuanphan

Thanks for getting back to me.

So i've removed my css which was moving logo down successfully but not burger icon (as per pic in original post):

/* header on tablet only */
@media screen and (max-width:991px) and (min-width:768px)  {
.header-title-nav-wrapper {
   margin-bottom: -30px;
}
}

.....and installed yours ...

logo and burger are in back in line high up ....but if i adjust padding %'s  the logo/burger remain where they are...cant adjust

there remains a big wedge of white space on bottom of header (see attached first pic) into which id like to lower logo/burger into (as per second pic)....

All the best

Kev

aha! many thanks again - problem solved

Kev