Ankhena

маркированный, маркир

С помощью margin или padding для li.
Для наглядности задайте li background.

А еще проще поставьте картинку background'ом для li

Альтернативное решение: использовать :before.

Видимо это CSS tabs

Надо разобраться, что именно не знаете?

Давайте так, Вы выкладываете свой код на https://jsfiddle.net/ и мы потом разбираемся с конкретными моментами. Так будет правильнее.

Коротко план:
1. <input type="text"><input type="image"> к первому инпуту placeholer и отступ, чтобы влез второй.

2. textarea и placeholder, тень

3. Дальше вроде все просто, border

С одной стороны да, понимание дизайнером принципов верстки это хорошо.

А с другой стороны, Вы ставите дизайнера в какие-то рамки. Соответственно, вместо полета его творческой фантазии, на выходе получаете "клеточки по сетке".
Вы же профессионал и сверстаете все, что нарисует дизайнер, с сеткой, с кривой сеткой или вообще без нее.
Если это не так, то дело не в дизайнере.

opacity в данном случае не поможет.

Вместо изменения прозрачности пишите изменения цветов в формате rgba.
Используйте фильтры master-css.com/page/css3filter
Подменяйте картинки.

Очень интересно, при Вашей записи

nav ul>li{
  display: inline-block;
  text-align: center;
}

Картинки и так должны быть по центру.

И если они так не становятся, надо смотреть остальной код, нет ли там какого-нибудь лишнего, например, float:left, для всех картинок.

Это https://jsfiddle.net/cqnxg7ej/ Ваш код и он работает. (Ну только там был один лишний закрывающий li, его убрала)

При такой конструкции (если неизвестно сколько элементов foo впереди и они могут идти вперемешку) на CSS никак.

Используйте обертку или доп.классы.
Или JS

1. Начать с meta viewport.
2. Проверить данные таблицы. Например "Режим работы - есть" - очень хорошо, что он есть и очень смешно.
3. "Поддержка" - данные заменить на 0р, $, $
4. С портом - тоже придумать как сократить.
5. Слова в кнопках "Заказать" заменить, например, на галочки для маленьких экранов. Или на "заказ", потому что ширины поля с ценой и названием тарифа как раз должно хватить.

И все аккуратненько поместится.

Для увеличения используйте белую границу, белый фон подложки, тень в одну сторону и т.д.

Тень: codepen.io/Ankhena/pen/ALydrA

<meta content="http://og-image.jpg" property="og:image">

ogp.me
https://yandex.ru/support/webmaster/open-graph/int...

Схлопывание margin

Задать min-width для всей ширины сайта.
Это же значение написать в meta viewport.

Это если надо удовлетворить гугл.

Но лучше подумайте о пользователях.
Какая разница на каком месте сайт в поиске, если с него все сбегут?
Сделайте нормально.