Reply To: Mobile Header/Navigation layout issue

Hello,

Please see the header of my website. http://prntscr.com/ohcpli
I have flushed the cache, and then deactivated the autoptimize Plugin.

Still the search bar is coming to the center.

.footer-widgets {
    background-color: #d2d2d2;
}
/* GeneratePress Site CSS */ 
.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}
.top-bar{
	background-color:#fff;
}
.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}

button, 
html input[type="button"], input[type="reset"], input[type="submit"], a.button, 
a.button:visited, 
a.wp-block-button__link:not(.has-background) {
	border: 1px solid transparent;
}

button.ghost, 
html input[type="button"].ghost, input[type="reset"].ghost, input[type="submit"].ghost, a.button.ghost, 
a.button.ghost:visited, 
a.wp-block-button__link.ghost:not(.has-background) {
	background: transparent;
	color: inherit;
	border-color: inherit;
}

button.ghost:hover, 
html input[type="button"].ghost:hover, input[type="reset"].ghost:hover, input[type="submit"].ghost:hover, a.button.ghost:hover, 
a.wp-block-button__link.ghost:not(.has-background):hover {
	background: transparent;
	color: #1e73be;
}

.hero-buttons > * {
	margin: 10px;
}

.widget-area .widget_search {
    padding: 0;
}

#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}

.no-sidebar .inside-article > *,
.no-sidebar #comments,
.no-sidebar .nav-links {
/* 	max-width: 700px; */
	margin-left: auto;
	margin-right: auto;
}

.no-sidebar .generate-columns-container .inside-article > * {
	max-width: none;
}

.nav-links > * {
		padding: 5px 15px;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
}

.entry-content .happyforms-flex {
	padding: 0;
}

#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

.site-header .header-image {
    width: 330px;
}

.main-navigation, .main-navigation ul ul {
    background-color: #fff;
    font-family: "Quicksand",Sans-serif;
}

/** Start Envato Elements CSS: Wedding Photography (157-3-a030ce61108067b66e77c040f2369150) **/

.envato-kit-161-caption figcaption{
	margin-top: -40px;
}
.envato-kit-161-fbox .elementor-flip-box__back{
	padding: 10px;
}
.envato-kit-161-fbox .elementor-flip-box__back .elementor-flip-box__layer__overlay{
background-color: rgba(255,255,255,0.91)
}

.envato-kit-161-slideshow .elementor-main-swiper{
	height: 85vh !important;
}
.envato-kit-161-tabs .elementor-tabs{
	text-align: initial;
	
}

.envato-kit-161-tabs .elementor-tab-title{
	border-radius: 4px;
	
}

.menu-toggle:before {
	color: #efb2a7;
}

.menu-toggle .mobile-menu {
    padding-left: 3px;
    display: none;
}

button.menu-toggle:hover, button.menu-toggle:focus, .main-navigation .mobile-bar-items a, .main-navigation .mobile-bar-items a:hover, .main-navigation .mobile-bar-items a:focus {
    color: #efb2a7;
}

.main-navigation li.wc-menu-item {
    order: 20;
}

div#wps-slider-section img.wpsf-product-img {
    border: none !important;
}

.navigation-search.nav-search-active {
    left: auto;
    width: 300px;
    top: 100%;
    padding: 20px;
    background: #fff;
}

.navigation-search.nav-search-active input {
    border: 1px solid #ddd;
    border-radius: 5px;
    height: auto;
}

.navigation-search {
    top: 150%;
    transition: opacity 300ms ease-in-out, top 300ms ease-in-out;
    left: auto;
}

.navigation-search.nav-search-active .search-button {
    position: absolute;
    right: 30px;
    top: calc(50% - 15px);
    height: 30px;
    display: block;
    content: "\f002";
    font-family: GeneratePress;
    opacity: .5;
    width: auto;
    background: transparent;
    color: #000;
    border: 0;
    padding-left: 5px;
    padding-right: 5px;
}

@media (max-width: 768px) {
    .site-header {
        display: none;
    }
}

this is my complete CSS.

Also I am Looking for the mobile design like
Menu on left and Search and cart icon at right. then Logo on next row.(http://prntscr.com/ohcslz) and when menu clicked then like this: http://prntscr.com/ohcswh

Looking forward!

Regards