Why is my responsive navbar not styling?

I am making a flex box responsive navbar, or at least attempting to, and for some reason, none of my css styling is making any changes to my html coding.

I’ve even tried changing up my html. I’ve also attempted to take some templates I have and switching things out. They work on the template, but not for my site.

    <html lang=en>  <head>   <meta charset="UTF-8">   <title>Frame of Light Designs</title>  </head> <header>   <div class="header">     <img src="images/logo.jpg" alt="logo">   </div> </header>  <body>    <div class="main-nav">     <nav role="navigation" id="nav">       <input class="trigger" type"checkbox" id="mainNavButton">       <label for="mainNavButton" oneclick>Menu</label>       <ul>         <li><a href="#">Home</a></li>         <li><a href="#">About Us</a>           <ul>             <li><a href="#">Our Story</a></li>             <li><a href="#">Meet Our Family</a>               <ul>                 <li><a href="#">Benjamin Hodder</a></li>                 <li><a href="#">Philip R. McDavid</a></li>               </ul>             </li>             <li><a href="#">Why Us</a></li>           </ul>         </li>         <li><a href="#">Our Services</a>           <ul>             <li><a href="#">Floral Design</a>               <ul>                 <li><a href="#">Artistry and Competitions</a>                   <ul>                     <li><a href="#">Capital District Flower and Garden Show</a></li>                     <li><a href="#">Cathedral In Bloom</a></li>                   </ul>                 </li>                 <li><a href="#">Booths</a>                   <ul>                     <li><a href="#">Capital District Flower and Garden Show</a></li>                   </ul>                 </li>                 <li><a href="#">Client Pieces</a>                   <ul>                     <li><a href="#">Anniversary and Romance</a></li>                     <li><a href="#">Birthday</a></li>                     <li><a href="#">Congratulations</a></li>                     <li><a href="#">Event</a>                       <ul>                         <li><a href="#">Prom</a></li>                       </ul>                     </li>                     <li><a href="#">Everyday</a></li>                     <li><a href="#">Get Well</a></li>                     <li><a href="#">New Baby</a></li>                     <li><a href="#">Just Because</a></li>                     <li><a href="#">Parties and Celebrations</a></li>                     <li><a href="#">Sympathy</a></li>                     <li><a href="#">Thank You</a></li>                   </ul>                 </li>                 <li><a href="#">Flower Customization</a></li>                 <li><a href="#">Wedding</a></li>               </ul>             </li>             <li><a href="#">Photography</a>               <ul>                 <li><a href="#">Animals</a>                   <ul>                     <li><a href="#">Zoos</a>                       <ul>                         <li><a href="#">Cleveland Metroparks Zoo</a></li>                       </ul>                     </li>                   </ul>                 </li>                 <li><a href="#">Cars</a></li>                 <li><a href="#">Events</a></li>                 <li><a href="#">Fitness</a>                   <ul>                     <li><a href="#">Caprara Fitness</a></li>                   </ul>                 </li>                 <li><a href="#">Mechanical</a></li>                 <li><a href="#">Nature</a>                   <ul>                     <li><a href="#">Flowers</a>                       <ul>                         <li><a href="#">Orchids</a></li>                         <li><a href="#">Other</a></li>                       </ul>                     </li>                     <li><a href="#">Gardens</a>                       <ul>                         <li><a href="#">Hannaford Memorial Garden</a></li>                       </ul>                     </li>                   </ul>                 </li>                 <li><a href="#">People</a>                   <ul>                     <li><a href="#">Family Photos</a></li>                     <li><a href="#">Headshots</a></li>                   </ul>                 </li>                 <li><a href="#">Performances</a>                   <ul>                     <li><a href="#">Park Playhouse Theatre</a>                       <ul>                         <li><a href="#">The Music Man</a></li>                       </ul>                     </li>                   </ul>                 </li>                 <li><a href="#">Travel</a>                   <ul>                     <li><a href="#">New York</a></li>                     <li><a href="#">Ohio</a></li>                     <li><a href="#">Vermont</a></li>                   </ul>                 </li>               </ul>             <li><a href="#">Videography</a>               <ul>                 <li><a href="#">Advertisements</a></li>                 <li><a href="#">Booths</a></li>                 <li><a href="#">Client Pieces</a></li>                 <li><a href="#">Floral Shows and Competitions</a></li>               </ul>             </li>             <li><a href="#">Graphic Design</a>               <ul>                 <li><a href="#">Our Clientelle</a></li>               </ul>             </li>             <li><a href="#">Web Design</a>               <ul>                 <li><a href="#">Our Clientelle</a></li>               </ul>             </li>             <li><a href="#">Social Media and Digital Marketing</a>               <ul>                 <li><a href="#">Our Clientelle</a></li>               </ul>             </li>           </ul>         </li>         <li><a href="#">Contact Us</a></li>         <li><a href="#">Merch Store</a>       </ul>     </nav>   </div>  </body>  </html> 
/*  Header  */ .header {   background: linear-gradient(#adf5ff, #236a58);   height: 35vh;   text-align: center;   align-self: center;   padding: 0;   margin: 0; } .logo { }  /*  General Styling  */ html {   box-sizing: border-box; } body {   font-family: "miltonian tattoo";   margin: 0; }  /*  Navigation Bar  */ .main-nav {   position: relative;    ul {     display: none;     width: 100%;     list-style: none;     margin: 0px;     padding: 0px;      li {       a {         display: block;         padding: 1em;         background: $  secondaryColor;         color: $  flex_nav_linkColor;         text-decoration: none;         border-right: 1px solid $  flex_nav_borderColor;         &:hover {           background: $  flex_nav_hoverColor;         }       }       &:last-of-type {         a {           border-right: 0px;         }       }       // 2nd level       ul {         li {           a {             padding-left: 1.5em;           }           ul {             li {               a {                 padding-left: 3.125em;               }             }           }         }       }     } // li   } // ul    input.trigger {     position: absolute;     top: -9999px;     left: -9999px;     &:checked ~ ul,     &:checked ~ ul li ul {       display: block !important;       @media (min-width: $  flex_nav_breakpoint) {         /* older flexbox */         display: -webkit-box;         display: -moz-box;         display: box;         -webkit-box-orient: horizontal;         -moz-box-orient: horizontal;         box-orient: horizontal;          /* newer flexbox */         display: flex;         flex-direction: row;       }     }   }   label {     position: relative;     display: block;     min-height: 2em;     padding: 0.45em;     font-size: 1.1em;     margin: 0;     cursor: pointer;     background: $  tertiaryColor;     line-height: 2em;     color: lighten($  primaryColor, 80%);   }    label:after {     position: absolute;     right: 1em;     top: 0.2em;     content: "61";     font-size: 1.8em;     color: $  flex_nav_hotdogsColor;   }    @media (min-width: $  flex_nav_breakpoint) {     ul {       /* older flexbox */       //display:block;       display: -ms-flexbox;       flex-direction: -ms-row;       display: -webkit-box;       display: -moz-box;       display: box;        -webkit-box-orient: horizontal;       -moz-box-orient: horizontal;       box-orient: horizontal;        /* newer flexbox */       display: flex;       flex-direction: row;        li {         position: relative;         text-align: center;          /* older flexbox */         -ms-flex: 1;         -webkit-box-flex: 1;         -moz-box-flex: 1;         box-flex: 1;          /* newer flexbox */         flex: 1;          // 2nd level         ul {           display: none !important;           position: absolute;           top: 3.0625em;           left: 0;           display: block;           width: $  flex_nav_subNavWidth;           z-index: 200;           li {             text-align: left;             ul {               z-index: 300;               top: 0px;               left: ($  flex_nav_subNavWidth - 0.1);               li {                 a {                   padding-left: 30px !important;                 }               }             }           }         } // ul 2nd level          &:hover > ul {           display: block !important;         }       } // li     } // ul     label {       display: none;     }   } // breakpoint } // nav