Как сделать так, чтобы figure не занимал всю ширину сайта?

Смотрите, вот я задала inline-block для figure и она перестала растягиваться на всю ширину...
https://codepen.io/AnnaSummer/pen/YzLBEGr

В современном мире для построения сеток используют флексы и гриды, а не инлайн-блоки.
А для ширины можно задавать fit-content, min-content, max-content

На будущее: всегда делайте песочницы, в которых можно увидеть что именно у вас не получилось.

Как сделать так чтобы код был виден постоянно без скролинга?

Ипатьев,

Во-первых, надо не ваять огромные простыни кода, а разбивать его на боле мелкие функции.

Довольно сложно разбивать на мелкие функции, например, тексты.
А скопированные откуда-то они будут в одну строку без переносов.
Сидеть и тыкать переносы занятие сомнительное.

Ещё бывает чужой код, который тоже как-то нужно рефакторить.
Хорошо бы его видеть.

Также мы не знаем на каком языке пишет автор. В HTML,например, в основном принято писать атрибуты в строчку. Встречала редкие проекты, в которых в кодгайде просили писать их в столбик. Большинству это неудобно. Аналогично длинные SVG и в разметке и в стилях.

Могу еще придумать случаи, когда именно переносы помогут делу, но думаю, что уже и так понятно.

Но вы, конечно, правы что выступаете за чистоту кода. Тут я поддерживаю.
Но не всегда чистота это коротенькие строки.

Как поместить текст на уровне геометрической фигуры?

lesha2008, извините, но я по-прежнему вижу картинки не тут в спойлере, а ссылками куда-то там.
И песочницы тоже не вижу.

Но ответить могу:
1. В современном мире для построения сеток используют флексы и гриды.
Флоаты используют только по назначению - для обтекания одного элемента другими или текстом.
В вашем макете никакого обтекания нет в помине.

2. Иконки являются украшениями, а не значимым контентом. В разметке они лишние. Такие штуки делают псевдоэлементами.

В разметке: список из 8 пунктов.
В каждом из которых заголовок и p.
Дальше гридом 2х2.
Псевдоэлемент располагается в первом столбце и двух рядах.

Как поместить текст на уровне геометрической фигуры?

html код почему то не дает выгрузить на сайт :(

Имеет смысл прочитать правила и обратить внимание на то, что в окошке редактора вопроса есть разные кнопочки, в том числе для вставки картинок и кода.

И будет хорошо, если приложите код в песочнице codepen.io, так его удобнее и смотреть и править.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Как вообще можно сделать логотип по центру

Прибить в центр гридами или абсолютами.

и в мобильной версии меню скрытым ?

Тут совсем не понятно, что у вас не получилось. Обычный display: none.

Как починить чекбоксы и правильно их расположить относительно текста?

Антон Антон, угу, только зачем дивы в лейбл-то пихать? Новичок же не поймет, что это вы конструкцию показывали и скопирует прямо невалидный код и будет пользоваться.

Вот этого вполне достаточно:
li>(input + label + p)

В крайнем случае ещё span внутри label на случай непредвиденных br.

Как расположить 8 блоков текста в две колонны?

Причем код на codepen.io, чтобы нам не компилировать его в мозгу.

Как расположить 8 блоков текста в две колонны?

Прям так и расположить.
display: flex
и ширина (или basis) детям.
Либо гридами..

Либо наплевать на дизайн и сделать с помощью columns

Что это за отступ?

Если к 100% прибавить 2 раза по 20px, то в 100% они не поместятся.
Читайте про box-sizing.
Или замените width на auto.

Не посоветуете бесплатные(желательно интерактивные) ресурсы по изучению стилизации форм?

Интерактивные вот https://htmlacademy.ru

Покажите явные ошибки в верстки тестового чтобы я понимал почему меня не взяли?

godsplane, для img пустой alt, для svg role presentation.

Также почитайте про https://developer.mozilla.org/en-US/docs/Web/Acces... и т.д.

А ещё лучше просто не складывать украшения в разметку.

Почему верхняя строка уходит под текст?

Почитайте про контекст наложения.
И думаю, вам понравится position: sticky

Как с помощью js при уменьшении ширины экрана обрезался текст?

Обычный text-overflow из css вам не поможет?

Есть ли объяснение данному поведению Flexbox?

Mors Clamor, либо были дочерние элементы по сценарию Сергея.
Либо вы дополнительно задавали дочерним элементам что-то типа height: 100%. А после этого они перестают растягиваться по stretch.

Как сделать блоки одинаковой высоты?

Олег,

не знаю, я бы цену в долларах и все что ниже, обернул бы в див и прижал бы к нижней границе блока (алиганитемс:флэксенд).

Не прокатит, потому что на скрине два дочерних имеют неизвестную высоту. (И обертка не нужна)

Пока ждем subgrid придется использовать js.

Как починить чекбоксы и правильно их расположить относительно текста?

Идея не плоха, если была бы без лишних div. Да и невалидный код лучше не демонстрировать новичкам.

Какая у вас структура папок в gulp?

Опросы запрещены на этом сервере.
Как сказали выше - на гитхабе полно разнообразных сборок для разных целей.

А добавьте конкретику в ваш вопрос. Что именно не получается или смущает и т.д.

Как вытащить border за контейнер?

QnaTwitt,

.wrapper>.container
бордер для wrapper

Как вытащить border за контейнер?

Хорошо, что вы сами понимаете о чем спрашиваете и знаете как этот бордер должен выглядеть. Нам же этого не видно.

Если нужен бордер на всю ширину окна, то нужно задать его блоку с шириной на всё окно. Благо точно есть body с такой шириной и можно ничего не придумывать.

Альтернатива: прибить абсолютом. В данном случае не ясно чего ради.

Есть хороший онлайн тренажёр для новичка, для закрепления базы?

Сделайте тренажер :)

Возможно ли последнюю ячейку в каждой строке сделать на всю ширину на мобилке (например)?

GaserV, так "сломайте" таблицу: задайте флекс или грид для tr и вперед.
Правда, ячейки перестанут вести себя как табличные, т.е. не будут знать о ширине аналогичных в другой строке.