JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
            <!-- Logo BEGIN -->
            <div class="header__logo">
                <a class="scroll site-logo" href="#promo-block"><img src="/theme-landing/assets/onepage/img/logo/red.png" alt="Карта Недвижимости"></a>
            </div>
            <!-- Logo END -->
            <a href="javascript:void(0);" class="mobi-toggler"><i class="fa fa-bars"></i></a>
            <!-- Navigation BEGIN -->
     
                <ul class="header__nav header-nav">
                    <li class="current"><a href="#promo-block">К началу</a></li>
                    <!--<li><a href="#about">About</a></li>-->
                    <li><a href="#services">Наше предложение</a></li>
                    <!--<li><a href="#team">Team</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>-->
                    <li><a href="#benefits">Почему мы</a></li>
                    <li><a href="#prices">Тарифы</a></li>
                    <li><a href="#contact">Контакты</a></li>
                    <li><a href="http://karta-nedvizhimosti.ru/login">Вход для клиентов</a></li>
                    <li><a href="http://karta-nedvizhimosti.ru/register">Регистрация</a></li>
                </ul>
            <!-- Navigation END -->
        </div>

SCSS

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media(max-width: 850px){
    flex-direction: column;
  }
}
    
.header-nav {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
    @media(max-width: 850px){
    flex-direction: column;
  }
}