Обьсясните пожалуйста, почему в оригинале, название пива " вахтер" находится под картинкой, а при проверке разметки страницы оно находится сверху?
На данном этапе Вы создаете html-разметку страницы, особо не привязываясь к расположению элементов. Объявляя их на странице, Вы просто идете сверху-вниз и слева-направо, но стараетесь сделать это максимально логично. Так, вполне логично, что первым тегом в карточке идет заголовок. Вот карточка товара, название такое-то, характеристики такие-то, вот его фото…
Все, что касается внешнего вида можно потом изменить в CSS. В том числе и положение заголовка.