Why is my navigation menu not showing up? - html

Question

I am working on a website with some friends for fun and we are having an issue with the nav menu not showing up after we press the button, I had to use flexbox to align my hamburger menu to the navbar originally, but now when we press it, it isnt showing any of the sub menus at all.
Yes, we realize that webkit is for scss, it was just there for examples
.topnav {
flex-grow: 1;
max-height: 100px;
}
.navbarItems a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
}
.navbarItems a:hover {
background-color: darkgray;
color: black;
}
.navbarItems a.active {
background-color: white;
color: white;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: grey;
}
/* Hambuger Menu */
.burger {
background: none;
outline: 0;
cursor: pointer;
border-top: 4px solid currentColor;
width: 28px;
transition: border-top 0.1s ease-in-out;
-webkit-transition: border-top 0.1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
position: relative;
align-self: center;
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-top: 4px solid transparent;
transition: border-top 0.5s ease-in-out;
-webkit-transition: border-top 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:before {
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
align-self: center;
}
.burger-check:checked ~ .burger:after {
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation {
overflow: hidden;
background-color: black;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 1.5s ease-in-out;
}
.burger-check:checked ~ .navigation{
overflow: visible;
background-color: purple;
max-height: 100%;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
p {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: center;
}
body {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: centeR;
}
h1 {
font-family: 'Libre Baskerville', serif;
font-style: italic;
text-align: center;
}
a {
color: inherit;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
.img {
width:1000px;
height:400px;
}
.header {
width: 322px;
height: 219px;
}
h4 {
font-family: 'Libre Baskerville', serif;
text-align: center;
list-style: square;
}
<div class="topnav" id="myTopnav">
<div class="navbarItems">
Home
About
</div>
</div>
<input class="burger-check" id="burger-check" type="checkbox">
<label for="burger-check" class="burger"></label>
</div>
<nav id="navigation1" class="navigation">
<ul>
<li><h1>Professional Awards</h1></li>
<li>Advisor of the Year Award</li>
<li>Emerging Advisor of the Year Award</li>
<li>Emerging Professional of the Year Award</li>
<li>Hall of Fame Award</li>
<li>Outstanding Service Award</li>
<li>Student of the Year</li>
<li><h1>Service Learning Awards</h1></li>
<li>Community Service Award</li>
<li>Environmental Action Awareness</li>
<li>Safety Awareness Award</li>
<li>Service Learning Individual Award</li>
<li>Special Olympics Award</li>
<li><h1>Special Recognition Awards</h1></li>
<li>BPA Marketing and Public Relations</li>
<li>BPA Merit Scholar</li>
<li>Chapter Activities Award of Excellence</li>
<li>Membership Explosion Award</li>
<li>Recruiter of the Year Award</li>
<li>Social Media Award</li>
<li>The Professional Cup</li>
</ul>
</nav>