CSS Organization with BEM

I’ve recently learned BEM & SASS, and I’d like to know if my BEM syntax is correct. I’m trying to create just the header of this page: https://blackrockdigital.github.io/startbootstrap-agency/

Are there any differences you would make to my class names? I get very confused about how to deal with elements when they are nested within other elements. I find that I often want to chain elements, like class="header__navbar__logo" , but I’ve heard this is not good BEM.

<header class="header">
    <div class="header__navbar">
        <div class="container">
          <h1 class="header__logo">Start Bootstrap</h1>
          <ul class="header__navigation">
            <li class="header__nav-item"><a class="header__nav-link" href="#">Services</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Portfolio</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">About</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Team</a></li>
            <li class="header__nav-item"><a class="header__nav-link" href="#">Contact</a></li>
          </ul>
        </div>
    </div>

    <div class="header__content">
      <h1 class="heading-primary">
        <span class="heading-primary--main">Welcome To Our Studio!</span>
        <span class="heading-primary--sub">It's Nice To Meet You</span>
      </h1>
      <a class="btn btn-yellow" href="#"></a>
    </div>
  </header>

It’s hard to picture your intentions. BEM is all about describing your intentions. Hard for me to understand why you’d have two h1s at the top of a page. You don’t really want to mix BEM and bootstrap classes that’s two different things.

<header class="header">
  <img class="header__logo" alt="Start Bootstrap">
  <nav class="header__navbar"> 
<!-- what's more memorable to the newest teammate or you two years from now menu or nav -->
     <ul class="header__menu">
       <li class="header__menu-item"><a class="header__menu-link" href="#">Services</a></li>
       <li class="header__menu-item"><a class="header__menu-link" href="#">Portfolio</a></li>
       <li class="header__menu-item"><a class="header__menu-link" href="#">About</a></li>
       <li class="header__menu-item"><a class="header__menu-link" href="#">Team</a></li>
       <li class="header__menu-item"><a class="header__menu-link" href="#">Contact</a></li>
     </ul>
   </nav>
   

   <hgroup>
     <h1 class="heading__title">Welcome To Our Studio!</h1>
     <h2 class="heading__subtitle">It's Nice To Meet You</h2>
   </hgroup> 
   <a class="header__something-button" href="#"></a>
 <!-- .header__something-button would have the CSS for .btn .btn-yellow -->
  </header>

class="header__navbar-logo" instead. If you need a space in a name use a single hyphen.

Lots of options but only put a class on an element if you need to style it.
You could have a .header__menu-logo, if that’s what you meant.
Err on the side of descriptive names rather than using a tag name.
Before <header> It was <div id="banner"> or #masthead or #header so using BEM names was more obvious.