Кексби. Промежуточное испытание 1/8

Здравствуйте. НЕ могу понять что у меня не получается с кодом, почему расстояние сосем не такое.

<!DOCTYPE HTML>
Кваст
<div class="page-header">
	<div class="logo">
		<img src="img/logo.png" alt="Кваст">
	</div>
	<div class="menu">
		<ul>
			<li><a href="#">История</a></li>
			<li><a href="#">Производство</a></li>
			<li><a href="#">Ассортимент</a></li>
			<li><a href="#">Где купить</a></li>
		</ul>
	</div>
	<div class="main-text">
		<p>Крафтовый квас<br> всему голова!</p>
	</div>
</div>

<div class="page-main">
	<h2>Новинки</h2>
	<div class="popular-items">
		<div class="catalog-item">
			<h3>Вахтёр</h3>
			<p>Алк. &lt; 1%</p>
			<p>Ккал: 35</p>
			<p>Ржаной хлеб, Вода, Солод, Соль</p>
			<img src="img/bottle-left.jpg" alt="Vahter">
			<p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
			<a href="#">Подробнее</a>
			<a href="#">Купить</a>
			<b>150 Р.</b>
		</div>
		<div class="catalog-item">
			<h3>Романтик</h3>
			<p>Алк. &lt; 0,5%</p>
			<p>Ккал: 27</p>
			<p>Ячменный хлеб, Вода, Солод, Апельсин</p>
			<img src="img/bottle-right.jpg" alt="romantic">
			<p>Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
			<a href="#">Подробнее</a>
			<a href="#">Купить</a>
			<b>90 Р.</b>
		</div>
	</div>
		<div class="priority">
			<ul>
				<li>
					<h2>Варим сами</h2>
					<p>Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
				</li>
				<li>
					<h2>Своё, родное</h2>
					<p>Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
				</li>
				<li>
					<h2>Не экономим</h2>
					<p>Человек это то, что он ест и пьет. У нас только качественные ингредиенты.</p>
				</li>
			</ul>
		</div>
		<div class="history">
			<h2>Немного истории</h2>
				<dl>
					<dt>
						<h3>Происхождение кваса</h3>
						<i>Источник: <a href="ru.wikipedia.org">ru.wikipedia.org</a></i>
					</dt>
					<dd>
						<img src="img/wiki-1.png" alt="kvas"> 
						<p>Квас на Руси появился в X-XI веке. Само слово «квас» тоже имеет древнерусское происхождение. Помимо России квас готовят в Белоруссии, Сербии, Македонии, Словакии и многих других странах, но называется он везде одинаково — квас.</p>
					</dd>

					<dt>
						<h3>Классификация кваса</h3>
						<i>Источник:<a href=" ru.wikipedia.org">ru.wikipedia.org</a></i>
					</dt>
					<dd>
						<img src="img/wiki-2.png" alt="kvas">
						<p>По российскому ГОСТу для промышленного изготовления — это напиток с объёмной долей этилового спирта не более 1,2%, изготовленный в результате незавершённого спиртового и молочнокислого брожения сусла.</p>
					</dd>
				</dl>
		</div>
		<div class="press">
			<h2>Пресса о нас</h2>
			<p>Сегодня мы провели дегустацию чего-то действительно новенького — крафтового кваса. Да, да, вы не ослышались! Спасибо Арсену и Руслану за то, что предоставили целую бочку своего напитка!</p>
			<i>Газета столичный Стольник<a href="#">Читать далее</a></i>
		</div>
		<div class="assortment">
			<h2>Ассортимент</h2>
			<table class="price-list">
				<tr>
					<th>Название</th>
					<th>Алк.</th>
					<th>Ккал</th>
					<th>Объём</th>
					<th>Стоимость</th>
				</tr>
				<tr>
					<td>Классика</td>
					<td>&lt; 1,2%</td>
					<td>33</td>
					<td>330 мл</td>
					<td>120 Р.</td>
				</tr>
				<tr>
					<td>Шабаш</td>
					<td>&gt; 1,2%</td>
					<td>45</td>
					<td>330 мл</td>
					<td>250 Р.</td>
				</tr>
				<tr>
					<td>Вахтёр <sup>Новинка</sup></td>
					<td>&lt; 1%</td>
					<td>35</td>
					<td>0,5 л</td>
					<td>150 Р.</td>
				</tr>
				<tr>
					<td>Романтик <sup>Новинка</sup></td>
					<td>&lt; 0,5%</td>
					<td>27</td>
					<td>0,5 л</td>
					<td>90 Р.</td>
				</tr>
			</table>
		</div>
		<div class="order">
			<h2>Заказать</h2>
			<p>Не ждите пока нас отрекламируют, как Вятский квас, и мы поднимем цены! Закажите настоящий крафтовый квас сейчас. При заказе от 10 баррелей — скидка 10%.</p>
			<label for="intro">Представьтесь:</label>
			<input type="text" name="intro" id="intro"><br>

			<label for="tel">Номер телефона:</label>
			<input type="text" name="tel" id="tel"><br>

			<label for="dop-tel">Доп. номер:</label>
			<input type="text" name="dop-tel" id="dop-tel"><br>

			<label for="email">Email:</label>
			<input type="text" name="email" id="email"><br>

			Объем заказа:
			<select name="order-volume" id="order">
				<option value="5">От 5 до 10 баррелей в неделю</option>
				<option value="10">От 10 до 20 баррелей в неделю</option>
			</select><br>
			
			Доп. комментарий:
			<textarea name="comment" id="comment" cols="100" rows="10"></textarea><br>
			
			<input type="checkbox">
			Я согласен получать квасную рассылку<br>

			<input type="submit" value="Отправить заказ">
		</div>
</div>

<div class="page-footer">
	<div class="footer-top">
		<img src="img/logo.png" alt="kvas">
		<ul>
			<li><a href="#">История</a></li>
			<li><a href="#">Производство</a></li>
			<li><a href="#">Ассортимент</a></li>
			<li><a href="#">Где купить</a></li>
		</ul>
	</div>
	<div class="footer-bottom">
		<div class="social">
			<a href="#">Инстаграм</a>
			<a href="#">Фейсбук</a>
			<a href="#">Вконтакте</a>
		</div>
		<p>При перепечатке материалов ссылка на сайт обязательна!</p><br>
		<div class="html-academy">
			<a href="#"><img src="img/htmlacademy.png" alt="HTLM"></a>
			<b>Разработчик:</b><a href="#">HTML Academy</a>
		</div>
	</div>
</div>

Это должна быть таблица 2х2.

Спасибо за срочный ответ, сейчас сделаю!

Чем у меня дальше тем хуже… после этого исправил, теперь третий пункт ошибка.

Оно почему-то распознает его как футер. Я пропустил какие-то ДИВы? Или что не так?

Убедитесь в том, что все 8 блоков находятся на первом уровне вложенности у body. То есть нет такого, что два и более блока имеют одну обертку. Также просмотрите, все ли теги закрыты. Это тоже может быть причиной такого отображения.

Спасибо еще раз! Вы очень помогаете!

Спасибо за помощь но в чем логика???
Зачем обворачивать в таблицу?

1 лайк

Сегодня доделал все. Прошел все 8 испытаний. Остался один вопрос: где продолжение?)

ибо мы не должны делать как проще а должны гадать что они там натворили

таблица - это как раз вариант “как проще”. Потому что нам нужно добиться соответствия макету, а по макету 35 находится так аккуратненько под <1%. И самый простой способ добиться этого - сделать таблицей (потому что содержимое ячеек, расположенных друг под другом очень легко выровнять).

1 лайк