<nav>
  <div class="logo">
    <a href="#">Logo</a>
  </div>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  <ul>
</nav>

body{
  background:goldenrod;
}
nav{
  background:black;
  width:80%;
  margin:0 auto;
  display:flex;
  align-items:center;
}
ul{
  margin:0;
  padding:0;
  display:flex;
}
li{
  list-style:none;
}
.logo{
  width:auto;
  margin-right:auto;
}
a{
  color:white;
  text-decoration:none;
  padding:20px 15px;
  display:block;
  text-transform:uppercase;
  transition:0.3s;
}
a:hover{
  color:white;
  background:mediumorchid;
  color:black;
}