Why does applying display: flex to the header__body block not put all the blocks inside it on a line?

Question

css

Guys, tell me what is my mistake, why when applying display: flex to the header__body block, it does not put all the blocks inside it into a line? Thanks in advance!

<header class="header">
  <div class="_container">
    <div class="header__body">

      <div class="header__menu menu">
        <div class="menu__icon icon-menu">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <a href="">
          <img src="../img/logo.svg" alt="">
        </a>



        <nav class="header__menu">
          <ul class="header__list">
            <li class="header__link"><a href="">link</a></li>
          </ul>
          <ul class="header__list">
            <li class="header__link"><a href="">link</a></li>
          </ul>
          <ul class="header__list">
            <li class="header__link"><a href="">link</a></li>
          </ul>
          <ul class="header__list">
            <li class="header__link"><a href="">link</a></li>
          </ul>
          <ul class="header__list">
            <li class="header__link"><a href="">link</a></li>
          </ul>
        </nav>

        <div class="header__phone">
          <img src="../img/phone.svg" alt="">
          <a href="">[phone]</a>
        </div>

      </div>
    </div>
</header>

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2C5085;
}


.header__body {
  display: flex;
  position: relative;
  z-index: 2;
  
}

.header__menu.menu {
}

.menu__icon.icon-menu {
}

.header__menu {
}

.header__list {
}

.header__link {
}

Answer 1

Because there is only one element inside it