Eror pada bagian position sticky

property position dan top sudah saya tulis,tetapi ketika di tampilkan di viewport,elemen yang menggunakan property position sticky masih belum terbaca pada tampilan halaman website.kemudian saya tambahkan elemen induk dari elemen nav berupa elemen header,yang kemudian saya berikan properti display inline,agar dapat menampilkan keseluruhan halaman.

lalu bagaimana caranya agar navigasi dapat ditampilkan secara penuh,dan ketika discrolling kebawah posisi dari navigasi sudah berada diatas/tidak tenggelam ketika discroll kebawah.

berikut tampilan gambar yang menunjukkan bahwa pada elemen nav,ketika dilakukan scrolling msh sama seperti elemen yang diatasnya.

image.png

berikut tampilan kode nya yg ada di file html

<header>

                      <nav>

                        <ul>

                            <li><a href="#sejarah">Sejarah</a></li>

                            <li><a href="#geografis">Geografis</a></li>

                            <li><a href="#wisata">Wisata</a></li>

                        </ul>

                    </nav>

</header>

berikut tampilan yang ada di file css

nav li{

    display: inline;

    list-style-type: none;

    margin-right: 10px;

}

nav {

    background-color: #ff5e5e;

    padding: 5px;

    position:sticky;

    top:0;

}

<!-- elemen induk -->
header {

     display: inline;

}