Impossible de fixer un <nav> à gauche

Je vois que tu es en flexbox, essaie au lieu de mettre direction, un flex-flow suivie d'un justify-content:flex-start.

Sinon tu as un super site sur les flex-box:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Sur ton header

flex-flow: row-reverse;
justify-content: flex-end;

Merci de vos réponses. Celles-ci ont partiellement réglé mon problème. J'aimerais pouvoir avoir mes trois barres à droite du header tout en gardant les liens à gauche. Image : https://imgur.com/7QL1dKN

change le flex-end en flex-start

J'ai fait ça :

header {
    flex-flow: row-reverse;
    justify-content: flex-end;
  }

  .hamburger {
    display: flex;
    justify-content: right;
    justify-content: flex-start;
  }

Mais rien ne change

Tu as deux justify-content dans ton .hamburger

essaie un

margin-left: auto

J'ai fait un top bar en flex-box voici mon code:

CSS

.socialmedia{
    background-color: rgb(0,0,0,.75);
    display: flex;
    flex-direction: row;
    height: 20px;
    padding: 4px;
}

.socialmedia a{
    color: white;
}

.insta{
    margin-left: 15px;
}

.linkedin{
    padding-left: 4px;
    margin-left: 15px;
}

.socialmedia .connection{
    align-items: flex-end;
    margin-left: auto;
    height: 20px;
    width: 20px;
    margin-right: 15px;
}

.socialmedia img{
    height: 20px;
    width: 20px;
    object-fit: cover;
}

.tooltip{
    text-decoration:none;
    position:relative;
    visibility: hidden;    
}

.connection:hover .tooltip {
    visibility: visible;
    opacity: 0.8;
    background-color: burlywood;
    position: absolute;
    transform: translate(-70%, 40%);
    padding: 3px;
    font-size: small;
    color: white;
    border-radius: 2px;
    width: 70px;
}

.tooltip:focus,
.tooltip:focus-within,
.tooltip:hover{
    text-decoration:none;
    position:relative;
    visibility: hidden;
}

HTML

<div class="socialmedia">
        <a href="https://www.instagram.com/humelhanstristan/?hl=fr" class="insta">
            <img src="/img/instagram_flat_icon.svg" alt="Instagram">
        </a>
        <a href="https://www.linkedin.com/in/thumelhans/" class="linkedin">
            <img src="/img/linkedin_flat_icon.svg" alt="Linkedin">
        </a>
        <div class="connection">
            <?php  if($_SESSION['user_connected'] === true):?>
                <a href="disconnection.php">
                    <img src="/img/logout.svg" alt="Se déconecter">
                    <div class="tooltip">Se déconnecter</div>
                </a>
            <?php else: ?>
                <a href="userConnection.php">
                    <img src="/img/connection.svg" alt="Se connecter">
                </a>
                <div class="tooltip">Se connecter</div>
            <?php endif ?>
        </div>
    </div>

Et voici le résultat:

https://ibb.co/8YyJGtK

Oui si tu veux les éléments à droite il faut faire justify-content: flex-start;