Заголовок с FlexBox не отвечает

Question

Здравствуйте. Я пытаюсь создать заголовок, используя гибкий дисплей, но у меня есть некоторые проблемы с адаптивным макетом

, например:

в основном содержимое моего заголовка оболочки заканчивается передачей его (мой заголовок оболочки имеет синий фон), что не должно было случиться

, и я не знаю, почему это происходит

код:

export default function App() {
  return (
    <div className="Wrapper">
      <div className="WrapperNav">
        <div className="Header">
          <div className="NavStickey Container">
            <div className="LogoHeader">
              <a>
                <img className="img" src={Logo} />
              </a>
            </div>

            <div className="SearchWrapper">
              <form className="form">
                <input className="input" />
              </form>
            </div>

            <nav className="NavWrapper">a</nav>
          </div>
        </div>
      </div>
    </div>
  );
}

css:

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}: 0;
}
.WrapperNav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.Wrapper {
  min-height: 100vh !important;
}
.Container {
  max-width: 1140px;
  padding: 0px 30px;
  margin: 0px auto;
}
.Header {
  display: flex;
  background: #3697e1;
  height: 130px;
  width: 100%;
  transition: all 0.2s ease 0s;
}
.NavStickey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
}

.LogoHeader {
  background: red;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 100%;
  min-width: 10em;
}

.img {
  width: 150px;
}

.SearchWrapper {
  background: yellow;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.NavWrapper {
  background: black;
  max-width: 100%;
  min-width: 18em;
  height: 100%;
}

.form {
}
.input {
  max-width: 100%;
  min-width: 200px;
}
.input:focus {
  min-width: 300px;
}
.WrapperNav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.Wrapper {
  min-height: 100vh !important;
}
.Container {
  max-width: 1140px;
  padding: 0px 30px;
  margin: 0px auto;
}
.Header {
  display: flex;
  background: #3697e1;
  height: 130px;
  width: 100%;
  transition: all 0.2s ease 0s;
}
.NavStickey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
}

.LogoHeader {
  background: red;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 100%;
  min-width: 10em;
}

.img {
  width: 150px;
}

.SearchWrapper {
  background: yellow;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.NavWrapper {
  background: black;
  max-width: 100%;
  min-width: 18em;
  height: 100%;
}

.form {
}
.input {
  max-width: 100%;
  min-width: 200px;
}
.input:focus {
  min-width: 300px;
}

пример:

https://codesandbox.io/s/blazing-morning-8jj26

в основном содержимое внутри контейнера выходя из него с меньшим разрешением

Я знаю, что мог бы что-то сделать с медиа-запросами, но я считаю, что это не проблема медиа-запросов, а какая-то ошибка в моем css