Блок с меню, при сжимании экрана, не переносит flex-элементы на новую строку. Хоть flex-wrap: wrap прописан.
body {
margin: 0;
padding: 0;
font-family: 'Barlow', sans-serif;
}
h1 {
font-weight: bold;
}
.dot {
color: red;
}
.container {
margin: 0 auto;
width: 950px;
}
.logo {
flex-grow: 1;
font-size: 24px;
font-weight: bold;
}
.navbar {
margin-top: 50px;
}
.navbar-flex {
display: flex;
}
.menu {
display: flex;
flex-wrap: wrap;
}
.menu-list:not(:first-child) {
margin-left: 50px;
}
<div class="navbar">
<div class="container">
<div class="navbar-flex">
<div class="logo">Japan<span class="dot">.</span></div>
<div class="menu">
<div class="menu-list"><a href="#">ABOUT</a></div>
<div class="menu-list"><a href="#">DISCOVER</a></div>
<div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
<div class="menu-list"><a href="#">PLAT YOUR TRIP</a></div>
</div>
</div>
</div>
</div>
.menu
, который находится внутри.container
– Михаил Камахин 21 фев в 12:29