Великий кексби, промежуточное испытание не отображается Блок 3

Курсы Промежуточные испытания
1

Не могу найти ошибку, почему третий блок не отображается при проверке. Теги перепроверил, валидатор validator.w3.org то же пишет, что всё в порядке.

<!DOCTYPE HTML>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>Кваст</title>
</head>

<body>
  <header>
    <div class="header-top">
      <img src="img/logo.png" alt="Kvast">
      <ul class="main-nav">
        <li><a href="#">История</a></li>
        <li><a href="#">Производство</a></li>
        <li><a href="#">Ассортимент</a></li>
        <li><a href="#">Где купить</a></li>
      </ul>
    </div>
    <div class="header-slider">
      <p>
        Крафтовый квас <br /> всему голова!
      </p>
    </div>
  </header>
  <main>
    <section class="new-items">
      <h2>Новинки</h2>
      <div class="catalog-item">
        <h3>Вахтёр</h3>
        <table class="specifications">
          <tr>
            <td>Алк.</td>
            <td>&lt; 1%</td>
          </tr>
          <tr>
            <td>Ккал:</td>
            <td>35</td>
          </tr>
        </table>
        <p class="composition"> Ржаной хлеб, Вода, Солод, Соль</p>
        <img src="img/bottle-left.jpg" alt="Вахтёр">
        <p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
        <a class="btn-light" href="#">Подробнее</a>
        <a class="btn-brown" href="#">Купить</a>
        <b>150 Р.</b>
      </div>

      <div class="catalog-item">
        <h3>Романтик</h3>
        <table class="specifications">
          <tr>
            <td>Алк.</td>
            <td>&lt; 0,5%</td>
          </tr>
          <tr>
            <td>Ккал:</td>
            <td>27</td>
          </tr>
        </table>
        <p class="composition">Ячменный хлеб, Вода, Солод, Апельсин</p>
        <img src="img/bottle-right.jpg" alt="Романтик">
        <p>Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
        <a class="btn-light" href="#">Подробнее</a>
        <a class="btn-brown" href="#">Купить</a>
        <b>90 Р.</b>
      </div>
    </section>

    <section class="features">
      <h2>Тест</h2>
      <ul>
        <li class="feature-item">
          Варим сами
          <p>Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
        </li>
        <li class="feature-item">
          Своё, родное
          <p>Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
        </li>
        <li class="feature-item">
          Не экономим
          <p>Человек это то, что он ест и пьет. У нас только качественные ингредиенты.</p>
        </li>
      </ul>
    </section>
  </main>
  <footer>

  </footer>
</body>

</html>
2

Приветствую! Проверка сработает только если все блоки располагаются непосредственно в body. Так что вёрстка с main в этом случае не пройдёт (хотя это верно).

2 лайка
3

Благодарю, помогло

4

Долго думала над этой же проблемой:)