问我一直在做水平菜单，得到的问题是导航标签不能容纳所有的ul列表

EN

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 80px;
  background: green;
}

a {
  white-space: nowrap;
  color: #fff;
}

nav {
  background: red;
}

.menu-list {
  display: flex;
  background: #000;
  margin: 0 2.5%;
}

li {
  margin: 0 10%;
}

.right-bar {
  display: flex;
}

.search {
  width: 20px;
  height: 20px;
  background: #000;
}

.language {
  width: 20px;
  height: 20px;
  background: #fff;
}
.navbar{
  flex: 1 1 auto;
}

<div class="menu">
  <div class="logo">
    <a href="">Click me</a>
  </div>
  <nav class="navbar">
    <ul class="menu-list">
      <li><a href="#">About me</a></li>
      <li><a href="#">My compony</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="right-bar">
    <div class="search">
    </div>
    <div class="language">
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
}

.menu {
 
  display: flex;
  align-items: center;
  justify-content: space-around;
 
  
  height: 80px;
  background: green;
}

a {
  white-space: nowrap;
  color: #fff;
}

nav {
 background: #fff;
}

.menu-list {
  display:flex;
  align-items:space-between;
  background-color:black;
}

li a{
  padding:20px; // remove margin from li and give padding on anchor tag 
  
}

.right-bar {
  display: flex;
}

.search {
 
  height: 20px;
  background: #000;
}

.language {
 
  background: #fff;
}