WP + storefront Can´t make top header nav and logo responsive - php

Question

Hi there and thanks in advance,
NOTE: The site is NSFW, just some ebooks for adults (romance and that stuff, but the ebooks covers may be hot).
My environment:
I have WP with a woocommerce, storefront+bookshop child theme
I have the Snippets plugins where I add all my PHP code
And I add CSS to Custom CSS within customizer
Now the problem:
I can´t figure out how to make site header, top nav bar and logo + buttons responsive.
The fact is that I could get some Top header styling using some PHP and CSS, BUT when I go to mobile view, the Top nav var, header, logo and menu goes crazy!
I need to fix that, I don´t know what to try (I googled a lot, tried changing values, %, float, inline, block, important, whatever) but I can´t get the right tip.
I don{t know if the child theme or storefront itself is overriding my attempts, maybe I have to unhook some function.
Maybe is just as simple as putting all 3 PHP snippets into one div and many spans tag, but I can´t figure out how I am burnt today.
I would thank any advice.
Here goes my CSS
/* Logo size for mobile site */
#media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 322px !important;
}
}
/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}
/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header {
display:none;
}
/*Make primary Pages full width*/
body.woocommerce #primary {
width: 100%;
}
/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
display:inline-block;
width:100%;
color: #fe00a1;
border: solid 1px #fe00a1;
}
/*Edited Cart*/
#site-header-cart{
padding-bottom:20px;
width:15%;
}
/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: “\f217”;
}
/*Align Help link*/
#help{
display:inline-block;
padding-left: 35px;
padding-right: 35px;
}
/*Align Gift card*/
#gift-cardl{
margin-left:80px;
}
/*Add top padding to rectangle*/
#rectangle {
padding:17px;
}
**PHP snippets**
add_action( ‘storefront_header’, ‘header_custom_gift_button’, 40 );
function header_custom_gift_button() { ?>
<span>
<button id=”gift-cardl”>Gift Card</button>
</span>
<?php
}
add_action( ‘storefront_header’, ‘header_custom_help_link’, 40 );
function header_custom_help_link() { ?>
<span style=”width:100%;”>
Help
</span>
<?php
}
add_action( ‘storefront_header’, ‘header_custom_subscribe_button’, 40 );
function header_custom_subscribe_button() { ?>
<button class=”subscribe_newsletter_btn”>Get Daily Book Bargains</button>
</span>
<?php
}