Skip to main content
1 de 2

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, 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>