每當我進入一個新的html頁面時，都會出現導航欄href路徑路由問題

當我第一次將頁面加載到index.html時，一切都加載得很好。我按導航欄中的“關于”鏈接指向about.html頁面，它加載良好。但是，當我在about.html頁面中再次按下“關于”鏈接時，它會拋出一個找不到它的錯誤。我猜href文件路徑在路由到其他html頁面時會發生變化。我不確定如何解決這個問題。此外，我使用了一個自定義的navigation-bar標簽，所以我有一個地方可以將其作為組件引用，并在每個頁面中重用它。此邏輯在main.js文件中。

//This is the main.js file
class Navigation extends HTMLElement {
    connectedCallback(){
        this.innerHTML = `
    <div class="menuContainer fadeInDown-animation">
        <div class="item"><a href="index.html"><button class="btn">Home</button></a></div>
        <div class="item"><a href="htmlPages/about.html"><button class="btn">About</button></a></div>
        <div class="item"><button class="btn">Skills</button></div>
        <div class="item"><a href="contact.html"><button class="btn">Contact</button></a></div>
    </div> 
    `
    }
}

customElements.define('navigation-bar', Navigation);

Here is my file structure:
src/index.html
src/htmlPages/about.html
src/htmlPages/contact.html
src/javascript/main.js
src/jquery-3.7.1.min.js
src/css/style.css