Help Needed: Sidebar Not Working Properly in My Project

Hey everyone, I'm currently working on a project where I have a sidebar, but it's not working properly. I'm a beginner in HTML and CSS, and I need some guidance on what might be wrong.
Live Preview:

🔗 Live View

📌 HTML: boxes.html

📌 CSS:

• boxes.css
• nav.css

What I Need Help With:

The sidebar is not behaving as expected (e.g., layout issues, not sticking, overlapping, etc.).

I want to fix it using only HTML and CSS (no JavaScript).

Any improvements or best practices would also be appreciated!

Questions:

How can I make sure the sidebar stays in the correct position?

Are there any common mistakes I should check in my CSS?

Any beginner-friendly tips to improve the sidebar's design and functionality?

I’d really appreciate any advice or suggestions! Thanks in advance! 😊

Comments

[Owen Ross]

The website gives me this:

However I can give some suggestions

If your sidebar html is something like this:

<div id="sidebar">
    <ul>
        <li>The Flight</li>
        <li>The City</li>
        <li>The Island</li>
        <li>The Food</li>
    </ul>
</div>

You can set the width attribute in css:

#sidebar {
    width: 15%;
}