Why my hamburger menu using checkbox not working?

Question

I am trying to make a hamburger menu using HTML and CSS only. I tried it from https://www.youtube.com/watch?v=xMTs8tAapnQ. Now I don't know why my code is not working.

header{
    background-color: #f1f1f1;
    text-align: center;
}

.inline{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header .primary #toggle{
    display: none;
}

header .primary #toggle:checked ~ header .primary nav{
    display: block;
} 

header .primary label{
    font-size: 2.25rem;
    display: block;
    cursor: pointer;
}

header .primary nav{
    display: none;
}

header nav ul{
    font-size: 1.25rem;
}


header .primary nav ul li{
    padding: 1rem;
}

header nav ul li a{
    text-decoration: none;
    color: #000000;
}

header nav ul li.active{
    border-bottom: 2px solid black;
    margin: 0 5%;
}

<header>
      <div class="primary">
      <div class="inline">
       <img src="./image/logo.png" alt="LOGO">
       <input type="checkbox" id="toggle">
       <label for="toggle">&#9776;</label>
       </div>
        <nav>
            <ul>
                <li class="active"><a href="./index.html">Home</a></li>
                <li><a href="./about.html">About</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>
  
    </header>

Answer 1

#toggle:checked ~ header .primary nav

targets a <nav> inside a class="primary" inside a <header> that is a subsequent sibling of your #toggle:checked.

So you need to place the <input> before the <header>, like this:

<input id="toggle" type="checkbox">
<header>
   <div class="primary">
      <nav>...</nav>
   </div>
</header>

---

Working example:

header {
  background-color: #f1f1f1;
  text-align: center;
}

.inline {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#toggle {
  display: none;
}

header .primary label {
  font-size: 2.25rem;
  display: block;
  cursor: pointer;
}

header .primary nav {
  display: none;
}

#toggle:checked~header .primary nav {
  display: block;
}

header nav ul {
  font-size: 1.25rem;
}

header .primary nav ul li {
  padding: 1rem;
}

header nav ul li a {
  text-decoration: none;
  color: #000000;
}

header nav ul li.active {
  border-bottom: 2px solid black;
  margin: 0 5%;
}

<input type="checkbox" id="toggle">
<header>
  <div class="primary">
    <div class="inline">
      <img src="./image/logo.png" alt="LOGO">
      <label for="toggle">&#9776;</label>
    </div>
    <nav>
      <ul>
        <li class="active"><a href="./index.html">Home</a></li>
        <li><a href="./about.html">About</a></li>
        <li><a href="./contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>

</header>

MDN: CSS combinators.

W3C (official spec): subsequent sibling combinator.