How to align my header icons in mobile view dawn theme

[IntechCarl]

Hi everyone, 
I have a problem with my header on mobile, at first I was wondering where did my header icons go, but when I expand the view to tablet mode the  store logo, cart icon, user icon, has been move to the end right. So it is not visible in mobile mode. I wanted these elements to be visible on mobile. Does anyone know how can I centered it again to mobile? See photo for reference:

Store Preview URL: https://njm7880s3hx9loio-13830324282.shopifypreview.com

Tablet mode:

Mobile Mode:

[DaisyVo]

HI @IntechCarl 

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
header.header {
    grid-template-areas:
        "left-icons heading icons"
        "headerSearch headerSearch headerSearch" !important;
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[IntechCarl]

@DaisyVo  Hi! Thank you for your response, but this is what it looks like after applying your code:

in mobile

in Desktop

[bryan76]

in the Custom CSS of the header in the theme editor: 

@media screen and (max-width: 749px) {
.header__heading-logo {
margin-right: 30px;
}
}

[IntechCarl]

hi @bryan76 , nothing happens after inserting your code in header custom css in theme editor

[bryan76]

@media screen and (max-width: 749px) {
.header__heading-logo {
margin-left: -30px;
}

}

}