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][1], si te ha servido no olvidor marcar como solucionado <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-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; display: flex; justify-content: space-between; align-items: center; } .contenedor-H1 { color: #fff; } .redesSociales > img { width: 35px; } <!-- language: lang-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> <!-- end snippet --> [1]: http://the-echoplex.net/flexyboxes/