Как можно исправить эту ошибку в css?

fallus, разумнее найти кривое место и сделать нормально.

Тем более, если будет динамически вставленный текст «Лаалаллалалалалалалаллалаа», и break-word не приписан, то опять видеть пробел слева?

Что мешает прописать его или hyphens: auto для блоков редактируемых клиентом/пользователем?

Браузер блокирует сайт?

1. Проверяйте названия классов или файлов у блоков, которые распознаются как реклама блокировщиками. Чтобы там не было слов типа adv, advert, banner и т.д.
2. К https сайту подключайте сторонние скрипты и картинки тоже по https (это, правда, уже не про рекламу, а про то, что браузер блокирует подключения jq и т.д.)

Как можно исправить эту ошибку в css?

Быстрое решение проблемы:

Ну да, подумаешь, куска содержимого может быть не видно. Зато быстро.

Как можно исправить эту ошибку в css?

Удаляйте по одном большие блоки, пока не поймете в котором ошибка.
Потом в нем мелкие.

Но id у body уже говорит о многом. Зачем он?

Как правильно указывать width в @media?

chelnokov_a, Ну и что, что брейкпоинтов не 3, а больше. Сколько их, обычно зависит от контента и макета.

Прописывать body минимальную ширину для каждого брэкпоинта.

Не надо так делать, до добра не доводит.
И такое ощущение, что вы пишете условия для ширины не в ту сторону. Потому что при адаптиве нет ни горизонтальных полос прокрутки, ни нужды задавать мин ширину для body.

По теме: смотрите в макет, вычисляйте что от чего зависит, где фиксированные размеры, где % (или vw vh) и т.д.

Дальнейшие рекомендации при наличии конкретных вопросов.

Как решить проблему с запуском сборки проекта gulp?

Гуглится по ошибке за 1,5 минуты.
Вы используете синтаксис 3го галпа в 4ом.

Не понимаю, как сделать?

Давайте начнем сначала.
Это ведь ссылки, а не просто div и p.
Ссылки это тег <a>
Меню это список <ul>, вложенный в тег <nav>
Будет разумно, если ссылка будет занимать всю площадь прямоугольника, а не только текст. Т.е. чтобы не надо было попадать мышкой только в текст. Тем более, что вы хотите, чтобы эффекты были на весь прямоугольник. Будет странно, если hover сработал, а нажать нельзя и нужно догадываться, что кликать нужно на текст.

Как-то так: https://jsfiddle.net/b6rkt9gx/

Какой тут сделать ховер на ссылке?

Причем тут вообще вёрстка?
Смените теги на дизайн или интерфейсы.

прозрачность?

Например. Только не полную, если речь о фоне.
Или любой другой вариант, который придумаете вы или дизайнер.

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

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

Я создал копию сайдбара для мобильной версии

Не нужно делать ни от чего копий, если можно обойтись без этого. А раз это будет модалка с fixed, то её прекрасно можно делать из оригинала.

При открытии модалки можно убирать скролл у body, ограничивать высоту модалки, например, 80vh. И задавать ей скролл.

Лучшие практики или скорость в вёрстке?

Антон Шаманов, вы же не рассчитывали в ответ получить ссылку на учебник русского?
И лучшие практики это как раз о том, как можно улучшить свою работу, а не то, что он обязан делать.

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

Не удивит.

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

Лучшие практики или скорость в вёрстке?

Антон Шаманов, объединить и минимизировать стили и при необходимости скрипты вполне в силах верстальщика. Оптимизировать фотки - тоже. Не писать всякой галиматьи в CSS (типа селекторов с гигантской вложенностью или все время перебивая одни и те же свойства тоже) вообще непосредственная задача верстальщика. Собрать спрайты, заменить картинки на css, там где это возможно и тому подобное.
Полно работы.

Лучшие практики или скорость в вёрстке?

Как лучше? Учиться делать на скорость без этого и гордиться что сделал за 2 дня, или уделять всему внимание и гордиться качеством?

Кто-то бегает марафоны, кто-то спринты. Кто из них лучше бегает?
Аналогия не полная, конечно, но смысл ясен.

Быстро накидать прототип и показать заказчику для дальнейшего обсуждения - одна задача.
Сделать конечную верстку для высоконагруженного проекта - другая.

Еще есть аспекты оплаты. Кому-то побыстрее, подешевле и с достаточным качеством.
Кому-то подольше, подороже и со всякими хитростями.

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

Лучшие практики или скорость в вёрстке?

Я бы не стала исключать верстальщика из этого процесса.

Как правильно это сверстать?

Число это input разумеется. Остальное кнопки.

Какие единицы измерения для шрифтов Вы используете?

Вы дали выдержку из очччень древней статьи.
Почитайте: https://learn.javascript.ru/css-units

Какие единицы измерения для шрифтов Вы используете?

Разумеется, подходящие для каждого конкретного случая.

Как решить задачу с таблицами?

mmmq, Вы же сами градиент придумали )) Я только подтвердила, что ОК так делать.

Как в Gulp cобирать стили в 2 файла?

Хочу чтобы стили с медиа запросами передавались в другой файл и в готовом проекте были файлы styles.css и media.css

Не надо так хотеть.
Надо хотеть, чтобы всё было в одном файле. А media тем более.

Еще в своих исходниках вы можете писать как угодно (ну если не думать, что кто-то другой будет поддерживать потом этот проект). А к сайту-то зачем 2 файла подключать. Их специально собирают все вместе и минимизируют.

Как перенести шрифт с одного сайта на другой?

Возьмите шрифт из гугло-фонтс https://fonts.google.com/specimen/PT+Serif
Скачайте или подключите прямо оттуда.

Как решить задачу с таблицами?

mmmq, почему это? Ничего не мешает делать двойной фон.
background-color и background-image это вообще разные свойства.