How to align Storefront navigation beside the logo

1) Add this snippet to functions.php

// =========================================================================
//CHANGE DEFAULT STOREFRONT HEADER LAYOUT 
// =========================================================================
function remove_storefront_actions() {
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50);
    remove_action( 'storefront_header', 'storefront_secondary_navigation', 30);
    remove_action( 'storefront_header', 'storefront_header_cart', 60 );
}
add_action( 'init', 'remove_storefront_actions' );
 
add_action( 'storefront_header', 'storefront_header_cart', 40 );
add_action( 'storefront_header', 'storefront_primary_navigation', 30);

2) CSS

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
.woocommerce-active .site-header .site-branding {
	width: 20% !important;
}
   
    .woocommerce-active .site-header .site-header-cart {
	width: 15%;
}
.site-header .col-full {
	padding: 0 !important;
	max-width: 100% !important;
	margin: auto;
	display: flex;
}
    
}/*END*/

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .site-header .col-full {
	max-width: 90% !important;
}
    
}/*END*/

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.site-header .col-full {
	max-width: 90% !important;
}
    .woocommerce-active .site-header .main-navigation {
	width: 70% !important;
}
}/*END*/
    
    /* XXL Large devices*/
@media (min-width: 1400px) { 
.site-header .col-full {
	max-width: 80% !important;
    }
    .woocommerce-active .site-header .main-navigation {
	width: 60% !important;
}
}/*END*/