Не работает position: sticky Не допустимое значение свойства

Подскажите в чём проблема, не работает positin: sticky. В браузере в dev tool пишет не допустимое значение свойства.

 <header class="header">
        <div class="header-top">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-auto">
                <a href="#" class="header-logo">
                  <img src="img/logo.jpg" alt="" />
                </a>
              </div>
              <div class="col">
                <div class="header-search">
                  <form action="" class="search">
                    <input
                      type="text"
                      class="search-input"
                      placeholder="Поиск"
                    />
                  </form>
                </div>
              </div>
              <div class="col-auto">
                <div class="header-contacts">
                  <a href="tel:+74954249890">+7 (495) 424-98-90</a>
                  <a href="mailto:[email protected]">[email protected]</a>
                </div>
              </div>
              <div class="col-auto ms-auto ms-lg-0">
                <a href="#" class="btn btn-primary btn-get-a-call">
                  Заказать звонок
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="header-bottom">
          <div class="container">
            <div class="row">
              <div class="col">
                <div class="header-menu">
                  <ul class="header-menu-list">
                    <li>
                      <a href="#">Главная</a>
                    </li>
                    <li class="parent">
                      <a href="#">Каталог</a>
                    </li>
                    <li>
                      <a href="#">Доставка и оплата</a>
                    </li>
                    <li>
                      <a href="#">Информация</a>
                    </li>
                    <li>
                      <a href="#">Новости</a>
                    </li>
                    <li>
                      <a href="#">О нас</a>
                    </li>
                    <li>
                      <a href="#">Контакты</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

.header {
  &-bottom {
    border-bottom: 1px solid var(--color-gray-300);
    position: sticky;
    top: 0;
  }