Flexbox 'flex-wrap' on the element not working - html

Question

So I want the divs in the 'header-content-lower' element to wrap down (if they all do not fit on the screen) in a row but its not even working, I tried changing box-sizing of the childs or setting max-width of the parent element but I still do not have a clue whats wrong, please help, im so done - this is my code:
#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;
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;
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>

Answer 1

It won't wrap since you defined a fixed width for .header-content-lower. This will make the container stay 1000px wide, even if the screen is smaller.
Replace width: 1000px; with max-width: 1000px;, remove flex: 1; from the child divs of .header-content-lower, and set a fixed width for them (e.g. width: 200px; so that they have the same width as in your example).
You need to play around with align-items and justify-content on .header-content-lower to change the behavior when wrapped, e.g. with a media query which targets a window width < 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>