Scroll to top of the div counting navbar height

I want scroll page to the top of section EXACTLY. I mean counting navigation bar height, and where section starts, should be displayed under of navigation bar. But in my case these sections are behind the nav. (Btw, I am scrolling to div by id and href, I think I should write some js codes).

HTML:

<div class="right-nav">
                    <ul>
                        <li><a data-scroll="header" href="#header-section" class="active-nav">Ana səhifə</a></li>
                        <li><a data-scroll="about" href="#about-section">Layihə</a></li>
                        <li><a data-scroll="terms" href="#terms-section">Qəbul şərtləri</a></li>
                        <li><a data-scroll="attendants" href="#attendants-section">İştirakçılar</a></li>
                        <li><a data-scroll="most-asked" href="#most-asked-section">Sual-cavab</a></li>
                        <li><a data-scroll="contact" href="#contact-section">Əlaqə</a></li>
                        <li><button class="apply-button " id="popup-opener">Müraciət et</button></li>
                    </ul>
                </div>

<section id="about-section" data-anchor="about">

            <div class="left-side-about">
                <img src="img/undraw-developer-activity.svg" alt="Image not found :/">
            </div>

            <div class="right-side-about">
                <span>CHALLENGERS CLUB</span>
                <h2>Bizim Haqqımızda</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap into electronic typesetting, remaining essentially unchanged.</p>
            </div>

        </section>

CSS:

#about-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 80px 0px;
}

.pc-nav {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 14px 0px;
}