Try this instead:
.menu-bar-items {
flex: 1 0 auto;
justify-content: flex-end;
}
.wp-block-search__inside-wrapper {
padding: 3px 15px 5px 5px;
margin: 4px;
background-color: #4d4f52;
border-radius: 40px;
}
.wp-block-search__inside-wrapper input[type="search"],
.wp-block-search__inside-wrapper input[type="search"]:focus {
line-height: 1;
padding: 0 5px;
background-color: transparent;
border: 0;
color: #fff;
width: 100%;
}
.wp-block-search__inside-wrapper button {
border: 0;
background: unset;
color: #fff;
font-size: 20px;
padding: 0 5px;
order: -1;
margin-left: 0;
margin-right: 10px;
opacity: 0.6;
}
.wp-block-search__inside-wrapper button:hover {
color: #fff;
opacity: 1;
}
@media(max-width: 768px) {
nav .navigation-branding img {
height: 45px;
}
.wp-block-search__inside-wrapper {
max-width: calc( 100vw - 200px );
}
}