Здравствуйте, возникла проблема при прохождении “3. Мастер-класс «Создание семантической разметки по макету»”.
А именно: не получается настроить или сделать отступы от картинок. прикрепляю ниже скриншоты.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Yacht-Club</title>
</head>
<body>
<header>
<a href="#"><img src="img/placeholder.svg" width="200" height="200" style="margin:-100" alt="Логотип яхт-клуба Yacht Club"></a>
<nav class="navigation-list">
<ul class="navigation-item">
<li class="navigation-item"><a href="#">Наш клуб</a></li>
<li class="navigation-item"><a href="#">Регаты</a></li>
<li class="navigation-item"><a href="#">Команда</a></li>
<li class="navigation-item"><a href="#">Обучение</a></li>
<li class="navigation-item"><a href="#">Новости</a></li>
<li class="navigation-item"><a href="#">Контакты</a></li>
</ul>
</nav>
<a href="#"><img src="img/placeholder.svg" width="200" height="200" alt="Войти"></a>
</header>
<main class="main-header">
<div class="yacht">
<h2>Вместе под парусом</h2>
<img src="img/placeholder.svg" width="200" height="200" alt="Фотография яхты в море">
</div>
<section class="main-article">
<p>20 октября - 19 апреля</p>
<h2>Стань частью команды</h2>
<p>Если вы давно хотели попробовать себя в яхтинге – сейчас самое лучшее время! Мы набираем команду будущих шкиперов. За 6 месяцев вы станете настоящим капитаном и уже в следующем сезоне сможете самостоятельно выйти в море!</p>
<img src="img/placeholder.svg" width="200" height="200" alt="Смотрит на море в бинокль">
<p>16 июля - 23 июля</p>
<h2>Рожденные в воде</h2>
<p>Подарите детям настоящее приключение! День с морскими пиратами на корабле – это лучшая команда, веселые аниматоры, игры, соревнования, работа в команде и, конечно, море!</p>
<img src="img/placeholder.svg" width="200" height="200" alt="Семья на яхте">
</section>
<section class="contacts">
<h2>Контакты</h2>
<ul class="contacts-list">
<li class="contacts-item"><p><b>Адрес:</b></p></li>
<p><i>г. Сочи, ул. Бзугу, 9</i></p>
<li class="contacts-item"><p><b>Телефон:</b></p>
<p><a href=tel:"+7622620563">8 (622) 62-05-63</a></p>
<li class="contacts-item"><p><b>E-mail:</b></p>
<p><a href=mailto:"yachtclub-sochi@mail.ru">yachtclub-sochi@mail.ru</a></p>
<li class="contacts-item"><p><b>Мы в социальных сетях:</b></p>
<ul>
<li class="contacts-item"><img src="img/placeholder.svg" width="200" height="200" alt="Facebook"></li>
<li class="contacts-item"><img src="img/placeholder.svg" width="200" height="200" alt="Twitter"></li>
<li class="contacts-item"><img src="img/placeholder.svg" width="200" height="200" alt="Instagram"></li>
</ul>
</ul>
<img src="img/placeholder.svg" width="200" height="200" alt="Местонахождение">
</section>
</main>
<footer class="footer-main">
<a href="#"><img src="img/placeholder.svg" width="200" height="200" alt="Логотип яхт-клуба Yacht Club"></a>
<p><a href="#">Политика конфиденциальности</a></p>
<p>Яхтклуб ©2020 Все права защищены</p>
<ul class="footer-info">
<li class="footer-info-list">
<h2>Компания</h2>
<ul class="sheet">
<li class="footer-info-item"><a href="#">О нас</a></li>
<li class="footer-info-item"><a href="#">Команда</a></li>
<li class="footer-info-item"><a href="#">Новости</a></li>
<li class="footer-info-item"><a href="#">Блог</a></li>
<li class="footer-info-item"><a href="#">Галерея</a></li>
</ul>
</li>
<li class="footer-info-list">
<h2>Яхт-клуб</h2>
<ul class="sheet">
<li class="footer-info-item"><a href="#">Правила</a></li>
<li class="footer-info-item"><a href="#">Стоимость</a></li>
<li class="footer-info-item"><a href="#">Анкета</a></li>
<li class="footer-info-item"><a href="#">FAQ</a></li>
<li class="footer-info-item"><a href="#">Партнеры</a></li>
</ul>
</li>
<li class="footer-info-list">
<h2>Услуги</h2>
<ul class="sheet">
<li class="footer-info-item"><a href="#">Аренда яхты</a></li>
<li class="footer-info-item"><a href="#">Свадьба на яхте</a></li>
<li class="footer-info-item"><a href="#">День рождения</a></li>
<li class="footer-info-item"><a href="#">Бизнес-встречи</a></li>
<li class="footer-info-item"><a href="#">Прогулки</a></li>
</ul>
</li>
<li class="footer-info-list">
<h2>Регаты</h2>
<ul class="sheet">
<li class="footer-info-item"><a href="#">Корпоративные регаты</a></li>
<li class="footer-info-item"><a href="#">Календарь мероприятий</a></li>
<li class="footer-info-item"><a href="#">Стать участником</a></li>
<li class="footer-info-item"><a href="#">Результаты регат</a></li>
<li class="footer-info-item"><a href="#">Обучение</a></li>
</ul>
</li>
</ul>
</footer>
</body>
</html>
`Текст «как есть» (без применения форматирования)`
Для тех, кто не понимает, что может быть не так с кодом и есть ли где “эталон” прохождения.
> Следующий пункт этого "Мастер-класса" дает ссылку на их версию. Там можно сравнить со своим кодом. Сравнив свой с "эталоном", заметил, что моя главная ошибка - это отсутствие "Class'ов" в картинках, ul. Но что не исправилось после просмотра, так это <h1></h1>. Бот не принимает почему-то, остается только через <h2>Вместе под парусом</h2> писать.
Удачи!