Trouble with header widget area

I managed to do what I want by following the advice here: https://kriesi.at/support/topic/adding-a-widget-area-inside-the-inner-container-of-the-header-after-the-logo/
It is exactly what I was looking for.

However, it didn’t work right on mobile. I added this code to help:

#header_main .inner-container .widget {
    position: absolute;
    right: 0;
    padding: 0;
}

/* Header widget Breakpoint */
@media only screen and (max-width: 767px) {

   .container.av-logo-container .inner-container {
        display: block !important;
    }
    #top #header .logo {
        display: inline-block;
    }
    /* Menu */
    #top #header .main_menu {
        display: inline-block;
        float: right;
    }
    #top #header .av-main-nav-wrap {
        float: right;
    }
    #top #header .widget {
        margin-top: -40px;
 margin-right: 30%;

    }

#header_main .container {
  max-height: 150px;
}
#header_main {
  height: 150px;
}
}

It seems to look fine on iPhone and iPad. But I still have to test on other devices.