Emil7676

Эти стили распространяются и на все li, которые находится внутри ulheader.

ul.ulheader li a {
    position: relative;
    top: -20px;
    line-height: 80px; 
    padding: 0 20px; 
    height: 80px; 
    color: #777;
   -webkit-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   transition: all .1s ease-out;
}

Нужно делать так, чтобы стили распространялись только на тех li, которые стоят на самом высоком уровне от родителя.

ul.ulheader > li > a {
    position: relative;
    top: -20px;
    line-height: 80px; 
    padding: 0 20px; 
    height: 80px; 
    color: #777;
   -webkit-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   transition: all .1s ease-out;
}

Смотрите готовый пример

const scrollIntoViewWithOffset = (selector, offset) => {
  window.scrollTo({
    behavior: 'smooth',
    top:
      document.querySelector(selector).getBoundingClientRect().top -
      document.body.getBoundingClientRect().top -
      offset,
  })
}

Это называется "липкий хедер"
https://www.google.com/search?q=%D0%BB%D0%B8%D0%BF...
https://www.youtube.com/results?search_query=%D0%B...

Нужно у обеих секции убрать свойство absolute. Тогда элементы сами по себе станут в ряд друг за другом