JS Bin Site header using flexbox // source https://jsbin.com/rekilad

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Site header using flexbox">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
html {
  font-family: arial, san-serif;
}

.site-header-logo img {
  height: 30px;
}

header {
  display: flex;
  justify-content: space-between;
  
  padding: 10px;
  background-color: #56727C;
}

section {
  display: flex;
  align-items: center;
}

.site-header__item {
  padding: 5px 10px;
}

.site-header__item + .site-header__item {
  margin-left: 5px;
}

.site-header-button {
  color: white;
  cursor: pointer;
}

.site-header__item-selected {
  background-color: #405b65;
  border-radius: 3px;
}
</style>
</head>
<body>
  
  <header>
    <section>
      <div class="site-header__item site-header-logo">
        <img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-light.png" alt="logo">
      </div>
      <div class="site-header__item site-header__item-selected site-header-button">Inbox</div>
      <div class="site-header__item site-header-button">Sent</div>
      <div class="site-header__item site-header-button">Trash</div>
    </section>
    
    <section>
      <div class="site-header__item site-header-button">Settings</div>
      <div class="site-header__item site-header-button">Logout</div>
    </section>
  </header>

.site-header-logo img {
  height: 30px;
}

header {
  display: flex;
  justify-content: space-between;
  
  padding: 10px;
  background-color: #56727C;
}

section {
  display: flex;
  align-items: center;
}

.site-header__item {
  padding: 5px 10px;
}

.site-header__item + .site-header__item {
  margin-left: 5px;
}

.site-header-button {
  color: white;
  cursor: pointer;
}

.site-header__item-selected {
  background-color: #405b65;
  border-radius: 3px;
}</script>
</body>
</html>