LI4NOOST, вариант без обертки не очень хорошо живет при адаптиве. Но раз удаление обертки помогло, то скорее всего проблемы были с её стилями. Старайтесь делать песочницы с видимой проблемой на codepen.io или аналогах, так вы быстрее получите ответ и он будет более точным, а не предположения.
SherbakovFirst, плагин действительно называется autoprefixer, с этой частью вопроса вы справились самостоятельно.
Ваши "вебкиты" это вендорные префиксы. Погуглите что это и зачем.
Кроссбраузерность лучше всего проверять в разных браузерах и на разных устройствах (в офисе, у друзей, знакомых и т.д.).
Но есть и специальные сервисы типа Browserstack. Бесплатно 30 секунд на каждый браузер/устройство.
в svg в данный момент стоит fill="red" но почему-то не красная как покрасить?
Не красная она потому что у всех элементов внутри задан другой fill, который перебивает.
Либо красить по отдельности либо убрать fill у дочерних и оставить только у svg.
Либо вообще убрать из svg и задавать через стили fill.
Либо оставить как есть и использовать в стилях как mask (для псевдо), меняя цвет с помощью background-color
Сначала нужно определиться кто вы: дизайнер или верстальщик?
С верстальщиком в некотором роде проще: можно узнать как это видит дизайнер и верстать.
Адаптивные контентные картинки верстаются тегом picture.
Остальное перестраивается с помощью @media либо за счет гибкости флексов или гридов.
Если дизайнер: статистика, конкуренты, изучение геометрии и т.д. И 100 раз подумать, а действительно ли для всех вьюпортов разумно делать на один экран.
Либо флексы и гриды либо js либо таблицы.