How to reduce gapping around logo in header on mobile view?

[cutiekins]

Hello Everyone,

I want to reduce the size of gapping on top and below of the logo on mobile view which i have marked in the below image, please help.

[Zworthkey]

@media only screen and (max-width: 600px) {
.logo__image-wrapper img {
    margin: -60px 120px !important;
}
div#shopify-section-slider {
margin-top:-79px !important;
}
}
@media only screen and (max-width: 768px) {
.logo__image-wrapper img {
    margin: -60px 350px !important;
}}

@cutiekins
Add this code in the bottom of the theme.scss file

[cutiekins]

Hello Zworthkey,

I added the code that you shared with me and it shifted the logo to the left, please check. check the below screenshot.

[cutiekins]

Hello Zworthkey,
I added the code that you shared with me and it shifted the logo to the left, please help. check the below screenshot.