Как сделать меню вот такого типа?

header { 
    display: flex; 
    justify-content: space-around; 
    background: whitesmoke; 
} 
 
ul { 
    list-style-type: none; 
    display: flex; 
    padding: 0; 
} 
 
li { 
  margin-right: 10px; 
} 
 
.log-in { 
    display: flex; 
    align-items: center; 
}

  <header> 
    <ul> 
      <li><a href="#">first</a></li> 
      <li><a href="#">second</a></li> 
      <li><a href="#">third</a></li> 
    </ul> 
    <div class="log-in"> 
      <button>Log in</button> 
    </div> 
  </header>

body { 
  margin: 0; 
} 
 
.container { 
  width: 1140px; 
  max-width: 100%; 
  margin: 0 auto; 
} 
/* justify-content space-around or between */ 
 
.wrap-menu { 
  padding: 0 20px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
} 
 
.menu { 
  color: #ccc; 
  display: flex; 
} 
 
.menu li { 
  list-style-type: none; 
  margin-right: 20px; 
} 
 
span { 
  color: aqua; 
  margin-right: 20px; 
  /*  отсутп слева Входа до пункта 4 */ 
    margin-left: 100px; 
} 
 
.right a { 
  text-decoration: none; 
  background-color: blue; 
  color: #fff; 
  padding: 10px 5px; 
  border-radius: 10px; 
}

<div class="container"> 
 
  <div class="wrap-menu"> 
   
    <ul class="menu"> 
      <li>Пункт 1</li> 
      <li>Пункт 2</li> 
      <li>Пункт 3</li> 
      <li>Пункт 4</li> 
    </ul> 
     
    <div class="right"> 
      <span>Вход и Регистрация</span> 
      <a href="">Подать объявление</a> 
    </div> 
     
  </div> 
   
</div>