I would appreciate some insight into what I'm doing wrong

Hello,

I am currently attempting to code a simple header / content / footer layout as part of a homework assignment. I have the vast majority of the styling done, but I’m having issues properly aligning some elements.

Specifically, I need the sidebar (connect with me) to move from right to left until it’s 40px away from the main-content div, and also have the nav elements above the sidebar align with it to the left., and I need to get my sticky footer to stay at the bottom.

Please take a look on my github:

or

Any insight anyone can provide would be much appreciated. I can’t use bootstrap, flexbox, or css grid (unfortunately). The requirements are to do this strictly with box model using floats, clears, boxsizing, etc. I think I got so used to relying on flexbox and more recently css grid that I am having a lot of issues remembering or finding a solution to these problems without messing up my layout. I started with fairly organized style sheets, but it’s rather messy as I continued to try things to see if they would work.

Thanks

Sure, this is the recommended layout.

No, it doesn’t need to be. I was going to mess with that, but honestly I don’t want to bother considering what the assignment is. I’m already doing an alternate layout with css grid for extra practice with it.

Ok, so this doesn’t solve the problem. But I finally realized that I put the side-bar outside of the container I had intended it to be in…wow. So I just need to solve the nav elements and the footer issue.

Thanks for the help so far.

Yeah, I tried it out. That’s not what I’m going for. The screenshot I shared shows that the header and footer span the entire length of the window. Also the footer needs to stick to the bottom of the page. I did figure out that moving the .side-bar div to within the .main-section div did the trick to move it next to the main-content.