因为你为.header-content-lower定义了一个固定的宽度，所以它不会换行。这将使容器保持1000px的宽度，即使屏幕更小。
将width: 1000px;替换为max-width: 1000px;，从.header-content-lower的子div中删除flex: 1;，并设置固定宽度（例如width：200px;这样它们的宽度就与示例中的宽度相同）。
您需要在.header-content-lower上使用align-items和justify-content来更改 Package 时的行为，例如，使用针对窗口宽度〈1000px的媒体查询。

@import "main.css";
.site-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-color);
  font-family: 'Ubuntu', sans-serif;
  height: 150px;
}

.header-content-upper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  width: 90%;
  color: var(--main-font);
  font-size: 1.1vw;
}

.header-content-upper .header-brand {
  color: var(--main-font);
  font-family: Glosa;
  text-align: center;
  font-size: 3.5rem;
}

.header-content-upper .header-nav {
  text-align: end;
}

.header-content-upper li {
  list-style: none;
  display: inline;
  padding: 10px;
}

.header-content-lower {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  height: 50px;
  border-top: 1px solid var(--second-font);
  font-size: 1vw;
}

.header-content-lower div {
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex: 1;*/
  height: 50px;
  width: 200px;
  color: var(--second-font);
}

.header-content-lower div:nth-child(2n-1) {
  border: 1px solid var(--second-font);
  border-width: 0px 1px 0 1px;
}

.header-brand,
.header-news,
.header-nav {
  flex: 1;
}

<header class="site-header">
  <div class="header-content-upper">
    <nav class="header-news">Subscribe & get 15% OFF</nav>
    <span class="header-brand">Giovanni</span>
    <div class="header-nav">
      <ul>
        <li>Call + (448) 777 55 00</li>
        <li>CART (0)</li>
      </ul>
    </div>
  </div>
  <div class="header-content-lower">
    <div>HOME</div>
    <div>MENU</div>
    <div>ORDER</div>
    <div>BLOG</div>
    <div>CONTACT</div>
  </div>
</header>