Tengo 2 hijos en un contenedor que usa flexbox, quiero hacer que ambos se coloquen a cada extremo (izquierda-derecha) de su contenedor, pero no logro hacerlo. El código que tengo es el siguiente:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prueba de transformación</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<div class="contenedor-Menu">
<div class="contenedor-H1">
<h1 class="logo">Título</h1>
</div>
<div class="redesSociales">
<img src="img/fa.png" alt="">
<img src="img/tw.png" alt="">
<img src="img/in.png" alt="">
</div>
</div>
<div class="contenedor-Texto">
<h4 class="mensajito">¡Hello! I'm Peter</h4>
<span class="subtitulo">Nove to travel all around the world and design beautiful things</span>
</div>
</header>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: url("../img/img.jpg");
height: 600px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.contenedor-Menu {
max-width: 1000px;
overflow: hidden;
margin: auto;
background-color: red
}
header .contenedor-Menu {
display: flex;
justify-content: space-around;
}
header .contenedor-Menu .contenedor-H1 {
width: 50%;
color: #fff;
margin-top: 1em;
}
header .contenedor-Menu .redesSociales {
width: 50%;
margin-top: 1em;
}
header .contenedor-Menu .redesSociales img {
width: 35px;
}