Could not get the index.html to load Navbar links properly

HTML/CSS
1

Hi all:

I am working on the Navbar in section 28 for part 3 of html5/css3 .
Follow the direction Mosh taught, but I couldn’t get my links to load on Navbar when opening the index.html. The initial “opacity: 0;” was set, but in the @media module supposed to set its initial state to “opacity: 1;” for screen 768px or larger. I could not get it to load properly for the larger screen.
I have changed the font size of the Nav links, and it does work for the page, but couldn’t get the opacity value 1 effect to show the Navbar links on the first load. Does anyone have any idea what is going on ? Thanks…
below is the css code:
@media screen and (min-width: 768px) {
.nav__toggler {
display: none;
}
.nav__list {
width: auto;
display: flex;
font-size: 1.6rem;
max-height: 100%;
opacity: 1;
}
.nav__item {
border: 0;
}
}

2

This problem was resolved by swapping the order of collapsible and Navigation Bar code blocks in the styles.css. The collapsible code needs to be before the Navigation Bar code in the styles.css.