Why doesn't :checked work?

Question

css

<div class="burger">
<div>
    <input type="checkbox" id="burger">

   

</div>



<label for="burger">

<div class="nav">

<div class="cherta"></div>
<div class="cherta2"></div>
<div class="cherta3"></div>

</div>

</label>

<div id="nav2">
    <div class="textnav2"><a href="#" class="textnav2">Lorem</a></div>
    <div class="textnav2"><a href="#" class="textnav2">ipsum</a></div>
    <div class="textnav2"><a href="#" class="textnav2">Dot</a></div>
    <div class="textnav2"><a href="#" class="textnav2">art</a></div>

</div>

</div>

#nav2{

display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
top: 3vh;
left:0vw;
width: 100%;
font-size: 2vw;
color: #2D2424;
text-decoration: none;
background-color: #FFCC00;
height: 7vh;

visibility: hidden;
}

.burger:checked + #nav2{
   
visibility: visible;

}

Answer 1

Will only work if the elements are on the same level

<input type="checkbox" id="burger">
<div id="nav2"></div>

#burger:checked + #nav2 {
}

Note:
It is bad practice to use identifiers for styling.

Answer 2

So it won't work. You give checked to a div and it doesn't have such a property