Dmitry

Тема: Расширенные возможности HTML
Урок 5. Модификаторы в БЭМ
Задача 2/4 Переименуем наш самый сложный блок


Тренажер выдает:  Элемент c классом ”.intern__column_multi-item” не вложен внутрь блока section с классом "intern".
Вроде вложен, или в БЕМ нельзя писать два класса в одних скобках, ПОМОЖЕТЕ ПОНЯТЬ В ЧЁМ Я ОШИБАЮСЬ?


HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name='description' content='портфолио Дмитрий Ковегин на Яндекс Практикуме'>
  <meta name="keywords" content="html, css">
  <meta name="author" content="Dmitry Kovegin">
  <link rel="icon" href="https://pictures.s3.yandex.net/favicon.png">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <title>Портфолио</title>
</head>
<body>

  <header class="header">
    <a href="#" class="header__link" lang='en'>Dmitry Kovegin</a>
  </header>

  <nav class="menu">
    <a href="#" class="menu__link">Введение в профессию</a>
    <a href="#" class="menu__link">HTML & CSS Intern</a>
    <a href="#" class="menu__link">HTML & CSS Pro</a>
  </nav>

  <main class="main">

    <section class="beginner">
      <div class="beginner__beginner-project_first-code"></div>
      <div class="beginner__beginner-project_design-principles"></div>
    </section>

    <section class="intern">
      <div class="intern__intern-column intern__intern-column_multi-item">
        <div class="intern__intern-project-block intern__intern-project-block_two-projects">
          <div class="intern__intern-project intern__intern-project_first-project"></div>
          <div class="intern__intern-project intern__intern-project_second-project"></div>
        </div>
        <div class="intern__intern-project-block intern__intern-project-block_one-project"></div>
      </div>
      <div class="intern__intern-column intern__intern-column_single-item"></div>
    </section>

    <section class="pro">
      <div class="pro-project first-pro-project"></div>
      <div class="pro-project second-pro-project"></div>
      <div class="pro-project third-pro-project"></div>
    </section>

  </main>

  <footer class="footer">
    <div class="footer__logo"></div>
  </footer>

</body>
</html>


CSS:

body {
  font-family: 'Cormorant Garamond';
  background-color: #FEFEFE;
}

.header {
  height: 95px;
  display: flex;
}

.header__link {
  margin: auto;
  font-size: 28px;
  text-decoration: none;
  color: #10191E;
}

.beginner_beginner-project {
  width: 636px;
  height: 430px;
  background-position: center;
  background-size: cover;
}

.beginner__beginner-project_first-code {
  background-image: url(https://pictures.s3.yandex.net/cat.png);
}

.beginer__beginner-project_design-principles {
  background-image: url(https://pictures.s3.yandex.net/designPrinciples.png);
}

.beginner {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.intern__intern-column {
  width: 636px;
  height: 557px;
  background-size: cover;
  background-position: center;
  display: flex;
}

.intern__intern-column_single-item {
  background-image: url(https://pictures.s3.yandex.net/coming_soon_3.png);
}

.intern {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.intern__intern-project-block_one-project {
  width: 636px;
  height: 240px;
  background-image: url(https://pictures.s3.yandex.net/coming_soon_4.png);
  background-size: cover;
  background-position: center;
}

.intern__intern-project {
  width: 306px;
  height: 290px;
  background-size: cover;
  background-position: center;
}

.intern__intern-project_first-project {
  background-image: url(https://pictures.s3.yandex.net/coming_soon_5.png);
}

.intern__intern-project_second-project {
  background-image: url(https://pictures.s3.yandex.net/coming_soon_6.png);
}

.intern__intern-project-block_two-projects {
  display: flex;
}

.intern__intern-column_multi-item {
  flex-direction: column-reverse;
  justify-content: space-between;
}

.intern__intern-project-block {
  justify-content: space-between;
}

.menu {
  display: flex;
  justify-content: center;
  height: 75px;
  align-items: center;
}

.pro {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pro-project {
  width: 306px;
  height: 290px;
  background-size: cover;
  background-position: center;
}

.first-pro-project {
  background-image: url(https://pictures.s3.yandex.net/coming_soon_9.png);
  order: 3;
  align-self: center;
}

.second-pro-project {
  background-image: url(https://pictures.s3.yandex.net/coming_soon_8.png);
  order: 2;
  align-self: center;
  flex-basis: 636px;
}

.third-pro-project {
  background-image: url(https://pictures.s3.yandex.net/coming_soon_7.png);
  order: 1;
  align-self: center;
}

.footer {
  height: 95px;
  display: flex;
}

.footer__logo {
  width: 145px;
  height: 25px;
  background-image: url(https://pictures.s3.yandex.net/logo_black.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
}

.main {
  max-width: 1330px;
  margin: auto;
}

.menu__link {
  margin-right: 10px;
  font-size: 18px;
  text-decoration: none;
  color: #10191E;
}