How do I change the positioning in the navbar without having to rename classes and styling?

You don't necessarily have to change classes if you don't want to. You can further qualify the selector by looking at the html structure to see if there's something you can add to it to make it uniquely target the bottom nav and not also target the top nav.

For instance, your bottom .main-nav is within a section element with a class of "main-footer". You can use that to uniquely target the bottom nav.

The selector could be .main-footer .main-nav

You could have something like this then:

.main-nav {
  /* styles common to both top and bottom navs */
}

.main-footer .main-nav {
  /* styles for the bottom nav only to get the spacing right */
}

Let me know if I've misunderstood the problem.

Also, you could use the <footer> element at the bottom there to wrap all your elements that make up the footer instead of the <section> element. In that case your selector could be footer .main-nav

Hi Jason,

Here is my current snapshot. https://w.trhou.se/k4fxdueyu9 The selector i use is main-nav.

I should probably rename the classes right? And then style them again?

Thanks Dwain,

I have put in a closing nav tag. Hope to hear your ideas about solving the issue i am trying to solve.

https://w.trhou.se/k4fxdueyu9

Hi Jason,

The goal is to push the bottom navbar and the h1 (h1=Rene van den Heuvel) more to the buttom of the page, so there is less margin between the h1 and the navbar. (in a way that is doesn't affect the top h1/navbar.