Why one parent with display: flex don't align its two children?

March 22, 2023

I’m trying to align two boxes side to side.
I created one parent (header), then two children ("header-left" and "header-right") in HTML.
I set "display: flex" in CSS on "header", but the two children don’t align, I can’t understand why.
I don’t understand why by setting display: flex on header, it doesn’t just align horizontally the two children, they stay one over the other.

@import url("https://fonts.googleapis.com/css2?family=Inter&family=Saira+Condensed:wght@500&display=swap");
* {
  background-color: rgb(29, 29, 29);
  color: rgb(250, 250, 250);
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 5px;
}

p {
  font-size: 0.8rem;
}

body {
  box-sizing: border-box;
  min-height: 100vh;
}

li {
  list-style: none;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}

nav ul {
  display: flex;
  width: 50%;
  justify-content: space-between;
}

.header {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hélium</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav>
    <h2>Helium</h2>
    <ul>
      <li>5G</li>
      <li>Explorer</li>
      <li>Ecosystem</li>
    </ul>
  </nav>

  <header>
    <div class="header-left">
      <div class="header-left-container">
        <h1>People-Powered Networks</h1>
        <h3>Start a Wireless Revolution</h3>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse nam sequi incidunt hic ipsum perferendis sint ratione, illo velit aspernatur!
        </p>
      </div>
    </div>
    <div class="header-right">
      <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/main.png" alt="Rooter image" height="90px
          " />
    </div>
  </header>
  <div class="info">
    <div class="info-left">
      <h3>Core technologies</h3>
      <btn-container>
        <button>Tokkens</button>
        <button>Proof of Coverage</button>
        <button>LongFi</button>
      </btn-container>
    </div>
    <div class="info-right">
      <h3>Our Investors</h3>
      <img-container>
        <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo2blue.png" alt="GV Logo" />
        <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo3blue.png" alt="Firstmark logo" />
        <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo4blue.png" alt="Khosla Ventures logo" /></img-container>
    </div>
  </div>
</body>

</html>

>Solution :

You are using a class selector in your CSS indicated by .

Either give header a class called .header or use:

header {
 display: flex;
}

@import url("https://fonts.googleapis.com/css2?family=Inter&family=Saira+Condensed:wght@500&display=swap");
* {
  background-color: rgb(29, 29, 29);
  color: rgb(250, 250, 250);
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 5px;
}

p {
  font-size: 0.8rem;
}

body {
  box-sizing: border-box;
  min-height: 100vh;
}

li {
  list-style: none;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}

nav ul {
  display: flex;
  width: 50%;
  justify-content: space-between;
}

.header {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hélium</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav>
    <h2>Helium</h2>
    <ul>
      <li>5G</li>
      <li>Explorer</li>
      <li>Ecosystem</li>
    </ul>
  </nav>

  <header class="header">
    <div class="header-left">
      <div class="header-left-container">
        <h1>People-Powered Networks</h1>
        <h3>Start a Wireless Revolution</h3>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse nam sequi incidunt hic ipsum perferendis sint ratione, illo velit aspernatur!
        </p>
      </div>
    </div>
    <div class="header-right">
      <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/main.png" alt="Rooter image" height="90px
          " />
    </div>
  </header>
  <div class="info">
    <div class="info-left">
      <h3>Core technologies</h3>
      <btn-container>
        <button>Tokkens</button>
        <button>Proof of Coverage</button>
        <button>LongFi</button>
      </btn-container>
    </div>
    <div class="info-right">
      <h3>Our Investors</h3>
      <img-container>
        <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo2blue.png" alt="GV Logo" />
        <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo3blue.png" alt="Firstmark logo" />
        <img src="/Users/jeandizian/Documents/Code/TP/Helium/img/investlogo4blue.png" alt="Khosla Ventures logo" /></img-container>
    </div>
  </div>
</body>

</html>