Place a div inside another to the right

What I look for

I started using the flex display, however despite the different attempts I made, I can't manage to separate the black box to the right and leave the rest of the elements to the left, everything I am placing it inside a div called "Header" and only the black box is what I am looking for a way to move it to the right.

.header{
    background-color:#F5F8DF ;
    display: flex;
    height: 60px;
    align-items: center;
    width: 100vw; 
}
.header__button{
    font-size: 15px;
    background-color: #F5F8DF;
    width: 10em;
    height: 60px;
    box-sizing: border-box;
    transform: skew(-15deg);
    border: 2px solid green;
    color: black;
    transition: .3s;
    text-align: center;
    line-height: 53px;
    z-index: 1;
      
    }
.header__button:hover{
    background-color: #198026;
    width: 11em;
    color:white;
    transition: .3s;
}
.prueba {
    width: 200px;
    height: 50px;
    background: #000;
}

<html>
<head>
  <link href="css/estilos.css" rel="stylesheet" type="text/css">
  </link>
</head>

<body style="background-color:#2A2929">
  <nav>
  <div class="header">
    <a href="index.html">
      <div class="logo">
        <div class="logoimg">
          <img src="img/chuekimg.png" width="60" height="60">
        </div>
        <div class="txtlogo">
          <img src="img/txt.png" width="140" height="70">
        </div>
      </div>
    </a>
    <div class="header__button">
      <span>DOTA 2 </span>
    </div>
    <div class="header__button">
      <span>CS:GO </span>
    </div>   
    <div class="prueba">   
    </div>
  </div>
  </nav> 
</body>
</html>