проблема с отображением flexbox

Question

блоки отображаются в столбик, а нужно в ряд

body {
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  display: flex;
  min-height: 100%;
  overflow: hidden;
  flex-direction: column;
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.header {
  background-color: #5e5373;
  margin-bottom: 25px;
}

.header__row {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
}

.header__logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ece89d;
}

.menu__list {
  display: flex;
}

.menu__list li {
  list-style: none;
  margin-right: 15px;
}

.menu__link {
  height: 20px;
  width: 100px;
  background-color: #ece89d;
  display: block;
}

.three-block__block {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  background-color: rgb(0, 221, 255);
  width: 35%;
}

.two-block__block {
  display: flex;
  margin-bottom: 20px;
  background-color: rgb(0, 221, 255);
}

.image {
  padding: 15px 15px 0px 15px;
}

.text {
  padding: 15px;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=1170">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <header class="header">
      <div class="container">
        <div class="header__row">
          <a href="" class="header__logo"></a>
          <div class="header__menu menu">
            <div class="menu__icon icon-menu">
              <span></span>
            </div>
          </div>
          <nav class="menu__body">
            <ul class="menu__list">
              <li>
                <a href="" class="menu__link"></a>
              </li>
              <li>
                <a href="" class="menu__link"></a>
              </li>
              <li>
                <a href="" class="menu__link"></a>
              </li>
              <li>
                <a href="" class="menu__link"></a>
              </li>
              <li>
                <a href="" class="menu__link"></a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <main class="page">
      <div class="container">
        <div class="three-block">
          <div class="three-block__block">
            <div class="three-block__item">
              <div class="three-block__item__row">
                <div class="three-block__item__image image">
                  <img src="img/bg.jpg" alt="">
                </div>
                <div class="three-block__item__text text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident amet odit mollitia illum deserunt sequi consequatur. Ad, quasi pariatur rem obcaecati deserunt ab doloremque possimus recusandae quia sequi autem.</div>
              </div>
            </div>
          </div>
          <div class="three-block__block">
            <div class="three-block__item">
              <div class="three-block__item__row">
                <div class="three-block__item__image image">
                  <img src="img/bg.jpg" alt="">
                </div>
                <div class="three-block__item__text text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident amet odit mollitia illum deserunt sequi consequatur. Ad, quasi pariatur rem obcaecati deserunt ab doloremque possimus recusandae quia sequi autem.</div>
              </div>
            </div>
          </div>
          <div class="three-block__block">
            <div class="three-block__item">
              <div class="three-block__item__row">
                <div class="three-block__item__image image">
                  <img src="img/bg.jpg" alt="">
                </div>
                <div class="three-block__item__text text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident amet odit mollitia illum deserunt sequi consequatur. Ad, quasi pariatur rem obcaecati deserunt ab doloremque possimus recusandae quia sequi autem.</div>
              </div>
            </div>
          </div>
        </div>
        <div class="two-block">
          <div class="two-block__block">
            <div class="two-block__item">
              <div class="two-block__item__row">
                <div class="two-block__item__image image">
                  <img src="img/bg.jpg" alt="">
                </div>
                <div class="two-block__item__text text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident amet odit mollitia illum deserunt sequi consequatur. Ad, quasi pariatur rem obcaecati deserunt ab doloremque possimus recusandae quia sequi autem.</div>
              </div>
            </div>
          </div>
          <div class="two-block__block">
            <div class="two-block__item">
              <div class="two-block__item__row">
                <div class="two-block__item__image image">
                  <img src="img/bg.jpg" alt="">
                </div>
                <div class="two-block__item__text text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident amet odit mollitia illum deserunt sequi consequatur. Ad, quasi pariatur rem obcaecati deserunt ab doloremque possimus recusandae quia sequi autem.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="container">
        <div class="footer__row">
          <div class="footer__block"></div>
          <div class="footer__block"></div>
          <div class="footer__block"></div>
        </div>
      </div>
    </footer>
  </div>
</body>

</html>

БЛОГ НА HUSL

проблема с отображением flexbox

Ответы (0 шт):