Cacher is the code snippet organizer for pro developers

<header class="site-header">
  <h1 class="header__site-title">
    <img src="./img/logomark.png" alt="logo-mark" class="header__logo-mark">
    SiteTitle
  </h1>
  <nav class="site-header__nav">
    <ul class="site-header__global-nav">
      <li class="site-header__global-nav-menu"><a href="">menu1</a></li>
      <li class="site-header__global-nav-menu"><a href="">menu2</a></li>
      <li class="site-header__global-nav-menu"><a href="">menu3</a></li>
      <li class="site-header__global-nav-menu"><a href="">menu4</a></li>
      <li class="site-header__global-nav-menu"><a href="">menu5</a></li>
    </ul>   
  </nav>
</header>

*,*::before,*::after{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.site-header{
  align-items: center;
  background-color: hsla(120,50%,50%,1);
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  &__global-nav{
    list-style:none;
    display: flex;
    &-menu{
      font-size: 1.2rem;
      &:not(:first-child){
        margin-left: 1.2rem;
      }
      &>a{
        color: white;
        text-decoration: none;
      }
    }
  }
}