Problems with navigation menu

[Marc87dk]

I wished to create a pure CSS responsive navigation hamburger menu, and I found an example on codepen which I wanted to play around with.
The whole thing worked perfectly until I decided that I wanted my navigation menu to have a fixed position. Once I did that, the list items all appear on top of each other below the header when I shrink the screen to tablet/mobile size.

See here
https://imgur.com/a/t2OP17v

I then deleted the position, and even though the code is now back to how it looked before, the problem with the lists is still there, even after saving, closing the browser etc.

What I want to know is WHY they appear like this?

.top-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #235024;
color: #FFF;
height: 50px;
padding: 1em;
}

.menu {
display: flex;
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
}

.menu > li {
margin: 0 1rem;
}

.menu-button-container {
display: none;
height: 100%;
width: 30px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
}

#menu-toggle {
display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
display: block;
background-color: #fff;
position: absolute;
height: 4px;
width: 30px;
transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2px;
}

.menu-button::before {
content: ”;
margin-top: -8px;
}

.menu-button::after {
content: ”;
margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
margin-top: 0px;
transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
margin-top: 0px;
transform: rotate(-405deg);
}

@media (max-width: 700px) {
.menu-button-container {
display: flex;
}
.menu {
position: absolute;
top: 0;
margin-top: 50px;
left: 0;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
#menu-toggle ~ .menu li {
height: 0;
margin: 0;
padding: 0;
border: 0;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
#menu-toggle:checked ~ .menu li {
border: 1px solid #333;
height: 2.5em;
padding: 0.5em;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu > li {
display: flex;
justify-content: center;
margin: 0;
padding: 0.5em 0;
width: 100%;
color: white;
background-color: #222;
}
.menu > li:not(:last-child) {
border-bottom: 1px solid #444;
}
}

[Paulie_D]

A Codepen demo would be preferable to a codedump.

[Author]

Posts