Leaderboard

Take a look at this: https://uselessdivs.com/blog/a-short-guide-to-help-you-pick-the-correct-html-tag/ I haven't read through the full article, but the image toward the top is correct and could be helpful.

padding-top: 250px; Try that on your .nav_div

Also, you're opening a <nav> element but closing it as a <main> element, so the structure is broken from the get-go.

position: fixed Setting the position to fixed takes the element out of the normal document flow. That means it does not actually take up space, and instead acts as a separate floating layer. Since it doesn't take up space, your nav bar then becomes the "first" thing in the document, thus showing at the top below your top bar "layer". What you need to do then, is create some space where your top bar should be, such as by giving your body element a top margin (or maybe padding) the same height as your top bar.

Can you throw something up in a JSFiddle so we can see it in action?