This has 2 fixes...which is really weird to me.
1: If I remove the tag #MARGIN-30 and Remove the tag #Nav-bar under margin-3 it fixes itself when I reapply said tags.
2: If I add overflow:hidden;
The question is, is anyone able to assist me with the reason for this happening, like...I've never had this on any prior project or learning experience with css.
It appears as though you are falling victim to Margin Collapse. It's just one of those many things that are a bit weird in HTML/CSS.
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.