Déplacer l'icône "burger menu"

Bonjour,

Je n'arrive pas à déplacer mon icône "burger menu".
Je souhaiterai qu'elle ai un décalage de 15px en haut et à droite pour pas que c'est icône soit collé dans l'angle.

<div class="logo__flex">
            <figure class="logo">
                <img src="images/logo.webp" alt="Logo du site La Chouette Agence">
            </figure>
            <nav id="navbar">
                <input type="checkbox" id="burger_checkbox" />
                <label for="burger_checkbox"></label>
                <ul>
                    <li>
                        <a href="index.html" class="active">Analyses</a>
                    </li>
                    <li>
                        <a href="corrections.html">Corrections</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="title">
            <h1>Rapport d'analyse du site "La Chouette Agence"</h1>
            <h2>Agence de web design basée à Lyon</h2>
        </div>

body {
    margin: auto;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f3996b;
    width: 100%;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: auto;
    z-index: 10;
}

.logo__flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.logo {
    width: 60px;
    height: 60px;
    position: relative;
    padding-left: calc(50% - 30px);
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#navbar {
    font-size: 24px;
}

ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: right;
    padding: 10px 20px 0 0;
    gap: 20px;
}

a {
    text-decoration: none;
    color: blue;
}

input[type="checkbox"] {
    display: none;
  }

.active {
    border-bottom: 2px solid blue;
}

.title {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

h1 {
    margin: 0;
    font-size: 38px;
    text-align: center;
}

h2 {
    margin: 0;
    font-size: 32px;
}

.analyse, .corrections {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 240px;
}

.span {
    padding-left: 5%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-self: center;
    flex-wrap: nowrap;
    gap: 10px;
    height: 35px;
}

.fa-star {
    display: inline-block;
    width: 21px;
    height: 21px;
    color: red;
    padding-top: 18px;
}

h3 {
    height: 26px;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 26px;
    text-decoration: underline;
}

.img {
    margin: 20px auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}

.results {
    width: 70%;
    position: relative;
}

.results img {
    width: 100%;
    object-fit: contain;
    border: 1px solid #000;
}

p {
    font-size: 22px;
    margin-bottom: 5px;
    margin-left: 8%;
    margin-right: 8%;
    ;
}

h4 {
    font-size: 22px;
    text-decoration: underline;
    padding-left: 8%;
}

.underline {
    white-space: nowrap;
    text-decoration: underline;
    padding-left: 25px;
}

.blue {
    color: blue;
    text-decoration: none;
}

footer {
    position: relative;
    background-color: #f3996b;
    width: 100%;
    height: 60px;
    margin: 40px auto 0 auto;
    bottom: 0;
    z-index: 10;
}

.center {
    text-align: center;
    padding-top: 10px;
    font-size: 20px;
}

.ref__flex {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: first baseline;
    flex-wrap: nowrap;
}

.ref__flex p {
    margin-right: 0;
}

.ref__flex--column {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding-left: 5px;
}

.ref__flex--padding {
    margin: 0;
}

.second-link {
    margin-top: 5px;
    margin-left: 0;
    display: inline;
}

.end {
    margin-top: 20px;
}

@media (max-width: 1140px) {
    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }

    p {
        font-size: 20px;
    }

    .navbar {
        font-size: 22px;
    }
}

@media (max-width: 817px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 20px;
    }

    p {
        font-size: 18px;
    }

    .navbar {
        font-size: 18px;
    }
ul {
    margin-top: 0;
}
      /* Gestion de l'affichage du menu */
  input[type="checkbox"]:not(:checked) ~ ul {
    display: none;
  }
  input[type="checkbox"]:checked ~ ul {
    display: flex;
  }
  
  /* Gestion de la checkbox */
  input[type="checkbox"] + label:before {
    font-family: FontAwesome;
  }

  input[type="checkbox"] + label:before {
    content: "\f0c9";
  }

  input[type="checkbox"]:not(:checked) + label:before {
    content: "\f0c9";
  }

  input[type="checkbox"]:checked + label:before {
    content: "\f00d";
  }
}


@media (max-width: 722px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 20px;
    }

    p {
        font-size: 16px;
    }

    .navbar {
        font-size: 18px;
    }
}

@media (max-width: 630px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

}

Le site est accessible ici : https://sylv0001.github.io/Sylv0001_4_corrections/

Merci pour votre aide :-)