Aligning elements in header

Hey dweddell,
Thank you for the link to your site and your screenshot, try adding a max-width: 33%; to each of your three elements for mobile like this:

@media only screen and (max-width: 767px) { 
	.responsive #top #header #header_main .inner-container .main_menu {
    order: 1;
    flex-basis: auto;
    align-items: center;
    align-self: center;
    height: inherit !important;
    width: 33%;
}
.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: auto;
    min-width: 100px;
    z-index: 9;
    transform: translateY(30%);
    margin-top: -30px;
    max-width: 33%;
}
.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: auto;
    padding: 0;
    clear: none!important;
    justify-content: center;
    align-self: center;
    align-items: center;
    z-index: 1;
    max-width: 33%;
}
}

This is the expected results:

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike