Eso sucede por que tu clase .redesSociales
tenia definido width: 50%
no lo necesitas definirlo ya que si tienes 2 elementos siempre usara el 50% ..cool he? :D
Otra cosa que hice fue eliminar margin-top: 1em;
no es necesario ya que con flex-box se pueden centrar elementos con la propiedad align-items: center;
, puedes incrementar el height en la clase contenedor-Menu
y siempre se mantendra centrado .
Es mejor para el rendimiento de los navegadores buscar elementos como
.contenedor-H1 {}
en vez de
header .contenedor-Menu .contenedor-H1{}
Si quieres entender mejor las propiedades de flex-box te sugiero visitar este link, si te ha servido no olvidor marcar como solucionado
* {
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;
display: flex;
justify-content: space-between;
align-items: center;
}
.contenedor-H1 {
color: #fff;
}
.redesSociales > img {
width: 35px;
}
<!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>