CSS Help! Sidebars/navbar not behaving

[CosmicAvelyn]

Hey there! I'm relatively new to coding, learning CSS/HTML off and on, and the past couple of days I've gotten the itch to work on my Neocities site. I pulled up a nice pretty free layout from Eggramen, and set about trying to tweak it to my liking...
Except the navbar and sidebars aren't doing what I want them to do, no matter how much tweaking I do.

For reference, this is the layout I pulled and wanted to tweak to my own aesthetic...
And here is what my layout is doing for some odd reason:

Nothing I'm doing seems to be working. The sidebars WERE behaving for a bit, but then I nudged some attributes around and they decided to stop. Please help!
Here's my website. Inspect away! https://cosmicavelyn.neocities.org/
(Ignore the hecked-up colors and default text, I'm working on that. The sidebars and navbar not doing what I want just takes priority for now!)

[Dan Q]

I see your problem!

Problem

Your sidebars both have this CSS directive:

Code

position: absolute;

This means that the top: and left:/right: directives position them relative to:

(a) the WHOLE PAGE, by default (this is what's happening: the left one is putting itself in the top-left of the whole page, and the right one is putting itself in the top-right of the whole page), or
(b) their nearest ancestor that has a position: specified (but you have none!)

Solution

The solution is to add this CSS to tell the inner "wrapper" to position itself relatively, so that the absolutely-positioned things "inside" it are positioned relative to IT, not relative to the page:

Code

.wrapper-2 {
  position: relative;
}