Hola a todos, estoy comenzando con el desarrollo web y comencé a utilizar el display flex. Sin embargo, a pesar de los diferentes intentos que realicé, no consigo el poder separar el cuadro negro hacia la derecha y dejar el resto de elementos hacia la izquierda.
Todo lo estoy colocando dentro de un div llamado "Header" y solo el cuadro negro es lo que estoy buscando la forma de moverlo hacia la derecha, si me pudieran ayudar lo agradecería muchísimo.
.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>