Это нормальное поведение. Компилятор не оборачивает в кавычки, когда они не нужны. Потому что .header[type=checkbox] эквивалентен .header[type="checkbox"]
А вот если ты напишешь какой-нибудь [type="checkbox*1"] - он его обернет в кавычки. ибо теперь они нужны.
если хочешь, чтобы оно работало адаптивно и пропорционально масштабировались твои маркеры с изображением - то только через svg.
p.s. картинку в svg загнать тоже можно
ну там же видно как сделано. position: sticky вешается на секции, когда они доходят до начала экрана и создается такой эффект. пару строк в js https://codepen.io/ibird/pen/rNdGBmo
эта белая полоса должна быть по обе стороны одинаковая) т.е. то что в макете - должно быть по середине страницы.
вот пример, где вместо 1180px представь что там 1440px:
