How to replace global CSS html, body styles with something more specific and get the same styling?

Question

I have a navbar which I want to just be able to copy into each page of my website without it affecting the styling of anything on the page. The problem is that the navbar which I have uses html, body as a selector and so obviously affects everything on the page.

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
    font-size: 62.5%;
    font-size: 10px;
}

I thought I would be able to replace html, body with whatever class, id or tags that I had surrounding my navbar html code. For example I tried to do this instead:

.navbar {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
    font-size: 62.5%;
    font-size: 10px;
}

But it doesn't apply the styles the same way as when html, body is specified even though all of the html was contained inside class='navbar'

Can someone advise me how to keep my navbar styled the same way without having all of these styles applied globally to the rest of the page? The navbar in question can be seen on the about, gallery, and contact pages of my website: https://memsmosaics.com/gallery.html

Thanks,

Answer 1

等待大神解答