scss это препроцессор для ускорения верстки и удобного разбивания рабочего кода на блоки.
css.map файлик-карта, позволяющая в инструментах разработчика показывать в каком из scss файлов написан исходный код. При том, что браузер работает с уже скомпилированным css.
объяснить как правильно редактировать такие стили
Чтобы совсем правильно, зависит от того, откуда вы их взяли.
Есть CMS, которые сами прекрасно умеют компилировать scss в css. И тогда вы просто редактируете scss.
Если это просто набор scss, то имеет смысл разобраться с Gulp.
Или использовать плагин (или встроенные возможности) в редакторах кода.
Возможно, сборка уже настроена и вам нужно только запустить её.
Можно настроить editorconfig. Все новые отступы редактор будет подставлять по конфигу.
Если нажать Ctrl Shift P, откроется командная панель редактора и там можно найти команду для формативание документа. Возможно редактор предложит установить какой-то форматтер под расширение файла.
Раз она вышла за рамки, значит у блока была задана высота.
Раз есть высота, то можно задать flex колонками и flex-wrap. Непоместившийся перенесется в другой столбик. А его скрыть, задав ширину и overflow.
Либо просто посчитать всё это на js и удалить/скрыть лишний.
Алексей Королёв, если фоновая картинка для всего сайта остается - то да, с помощью backdrop-filter (с учетом caniuse). Для сайдбара картинки использованы не будут.
Также можно размазать градиенты (хоть радиальные, хоть обычные или конические) с помощью обычного filter: blur()
Например: https://jsfiddle.net/84xdnzay/
И, не знаю, считается ли SVG, вставленная инлайном в CSS картинкой или уже нет.
0. Проверяйте свой код валидатором https://validator.w3.org/nu/
Сюрпризов станет меньше.
В том числе и CSS.
Хорошие редакторы кода также сразу подсвечивают ошибки. Обращайте внимание на цвет и подчеркивания.
1. Учимся считать.
33% + 9px + 33% + 9px + 33% + 9% = ?
Влезет это в 100% при ширине родителя 1000px?
Нет, не влезет. А сколько влезет? Две.
Современные браузеры понимают column-gap для флексов. Можете использовать calc, чтобы влезло в 100%.
Либо просто space-between.
2. Обводите рамочками
Если не понятно почему что-то не выравнивается и вообще что происходит, обводите рамочками (border, outline (+ outline-offset), box-shadow).
Флекс там прекрасненько работает.
Вы задали его для payment_box. Но он по высоте ровно как иконки. Там просто нет свободного места для выравнивания. Какое бы вы ни задавали, результат будет одинаковым.
Зато родитель занимает высоту всей строки. Это значит, что нужно выравнивать payment_box внутри payment_img. Либо сначала растянуть payment_box на всю высоту.
А еще лучше убрать лишние обертки. Зачем вокруг картинок два div? Одного за глаза и за уши.
Можно поменять на список.
3. продолжаем считать и обводить.
Элементы не влезли, появилась горизонтальная полоса прокрутки.
Ширина header задана 100%. А у вас видимая часть вывалилась за эти 100%, потому что у внутреннего блока ширина 1003px (откуда она такая кривая взялась?). Но хедер закончился там, где закончились 100%.
Евгений, логично.
Ссылка logo имеет размеры 100х50. Картинка явно другие. Картинка просто выпала из ссылки.
Уберите размеры ссылки или впишите в неё картинку с помощью object-fit.
Вообще-то размеры той ссылке я задала просто так, только для того, чтобы её было видно.
А разметка где?
А ещё лучше песочница на jsfiddle.net или аналоге с указанием что именно не работает. И скрин как должно быть или нормальное объяснение.
Сейчас похоже, что вы задали флекс блокам, внутри которых только текст.
Проблема с padding тоже не совсем ясна. В коде вижу его только у одного элемента. По вашему описанию, он у него и срабатывает. Что не так?
Евгений, похоже, что задали фикс высоту или забыли align-items.
Но почему нужно угадывать?
Где ваша песочница с кодом или ссылка на сайт, чтобы точно можно было посмотреть в чем дело?
