Realetive

По шагам, чтобы была понятен ход мысли:

1. определим базовый блок
   

   <div class="header">
     <div class="header__logo"></div>
     <div class="header__nav"></div>
   </div>

   
   
   

   .header {
     background-color: red;
     display: flex;
   }
   
   .header__logo {
     width: 180px;
   }
   
   .header__nav {
     flex: 1; /* вся оставшаяся ширина */
   }

   
   
   
2. логотип — самостоятельный блок, может использоваться, например, в футере. Я сразу использовал микс на header__logo, но для базового понимания можно внутри header__logo сделать самостоятельный — за счёт БЭМ это ни на что не повлияет.
   
   

   <div class="header">
     <div class="header__logo logo">
       <img src="" alt="logo of top digital …" class="logo__image">
       <img src="" alt="Top digital …" class="logo__text">
     </div>
     <div class="header__nav"></div>
   </div>

   
   
   

   .logo {
     display: flex;
     justify-content: space-between;
   }
   
   .logo__image {
     flex: 1;
   }
   
   .logo__text {
     width: 75%;
   }

   
   
   За счёт flex-модели logo__image можно использовать без logo__text, получим просто иконку-логотип.
   
   
   
3. добавляем меню
   

   <div class="header">
     <div class="header__logo logo">
       <img src="https://via.placeholder.com/43x43" alt="logo of top digital …" class="logo__image">
       <img src="https://via.placeholder.com/134x15" alt="Top digital …" class="logo__text">
     </div>
     <nav class="header__nav nav">
       <ul class="nav__menu list list_of_menu">
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
         <li class="list__item nav__menu-item">
           <a href="" class="link nav__link">Пункт меню</a>
         </li>
       </ul>
     </nav>
   </div>

   
   
   

   .list_of_menu {
     list-style: none;
   }
   
   .nav__menu {
     display: flex;
   }
   
   .nav__menu-item + .nav__menu-item {
     margin-left: 1em;
   }
   
   .nav__link {
     color: white;
     text-decoration: none;
   }

   
   
   
4. скорее всего ширина содержимого у header совпадает с шириной содержимого других частей страницы (то, что иногда называют 12-колоночной вёрсткой) — заведём отдельный класс для этого, например, content и обозначим, какое именно содержимое подчиняется этой ширине
   

   <div class="header">
     <div class="header__content content">
       <div class="header__logo logo">
         <!--        -->
       </div>
       <nav class="header__nav nav">
         <!--        -->
       </nav>    
     </div>
   </div>

   
   
   

   .content {
     width: 800px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
   }

   
   
   
   
   Результат: https://codepen.io/Realetive/pen/GRoOzeg

Почти. Но вы упустили важный приём в методологии — Миксы. Они позволят создавать переиспользуемый блоки повторяющихся сущностей (параграфы, картинки, заголовки) в других частях страницы:

<div class="site">
  <header class="header">
    <div class="header__container container">
      <div class="header__inner">
        <a class="logo header__logo" src="/"><img class="logo__img img" src="images/logo.svg" alt="Likigram" title="Likigram"></a>
        <nav class="nav" role="navigation">
          <a class="nav__link link" src="#">Buy Instagram Likes</a>
          <a class="nav__link link" src="#">Buy Instagram Followers</a>
          <a class="nav__link link" src="#">Buy Instagram Views</a>
          <a class="nav__link link" src="#">Get Free Likes</a>
          <a class="nav__link link" src="#">Instagram Downloader</a>
          <a class="nav__link link" src="#">Support</a>
        </nav>
      </div>
    </div>
  </header>
  <section class="banner">
    <div class="banner_container container">
      <div class="banner__inner">
        <div class="banner__info">
          <h1 class="banner__title heading heading_size_l">Get Real Instagram likes, followers and views!</h1>
          <p class="banner__paragraph paragraph">Buy instagram likes, instagram followers and instagram views for your account.</p>
          <p class="banner__paragraph paragraph">Grow your instagram account quickly with Likigram</p>
        </div>
        <div class="banner__actions">
          <img class="img banner__img" src="images/banner-img-1.png" alt="banner img">
          <a class="button button_medium button_background_orange banner__button" src="#price-followers">Grow Your Instagram Account</a>
        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer_container container">
      <div class="footer__inner">
        <div class="footer__info">
          <div class="logo footer__logo"><img class="img logo__img" src="images/footer-logo.png" alt="Likigram" title="Likigram"></div>
          <div class="copyright footer__copyright">© 2019, Likigram All rights reserved</div>
          <div class="payments"><img class="payments__img" src="images/payments.png" title="We accept payments via Visa Mastercard and Paypal" alt="We accept payments via Visa Mastercard and Paypal"></div>
        </div>
        <div class="footer__menu">
          <ul class="footer__nav list nav">
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Contact Us</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Support</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Blog</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Terms and Conditions</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Privacy Policy</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Refund Policy</a></li>
          </ul>
          <ul class="footer__nav list nav">
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Likes</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Followers</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Buy Instagram Views</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Followers</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Get Free Likes</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">Instagram Downloader</a></li>
            <li class="footer__nav-item list__item nav__item"><a class="footer__nav-link nav__link link" src="#">About Likigram</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>

Визуально кода стало больше, но во-первых эту проблему сводит на «нет» gzip, а во-вторых — больше кода всё равно генерируется для CSS, а подход миксов позволяет объединять повторяющиеся сущности на блоках, исключая дублирование кода.

Вас не спасёт ни MODX, ни БЭМ, ни React'ы с Angular'ами. Если использование инструментов сборки вызывают сложности — не используйте. Целесообразность их использования приходит лишь с опытом понимания того, что вы реально можете автоматизировать, от «магии» толку мало.
Это я вам говорю, как адепт БЭМ-стека (ага, того самого, из Яндекса) и амбассадор MODX.

https://github.com/yoksel/common-words