Горната и долната лента вече заемат цялата ширина

Малка промяна, видима на всяка страница тук: тъмната лента отгоре и долната лента отдолу вече заемат цялата ширина на прозореца.

До днес те стояха в същата колона от 1180 пиксела като всичко останало, така че на широк екран страницата беше ивица съдържание, носеща се в празен фон. Долната лента на статистическите страници вече беше с пълна ширина — единствената, и именно това несъответствие постави началото на всичко.

Какво не се промени

Съдържанието в тези ленти. Текстът, бутоните и числата все така се подравняват по същите 1180 пиксела като разделите под тях, така че лентата е широка, а текстът — не. Никой не чете редове от сто знака, а заглавие, разтеглено през 27-инчов монитор, не е дизайн, а недоглеждане.

Защо не обичайният трик

Обичайният начин да извадите елемент от центрирана колона е отрицателно отстъпване спрямо 100vw. Той има недостатък, който лесно се пропуска на настолен компютър с изключена лента за превъртане: vw включва лентата за превъртане. Блокът става по-широк от видимата област точно с нейната ширина и цялата страница може да се издърпа настрани с няколко пиксела — което на телефон означава, че оформлението се клатушка под палеца по средата на четенето.

Затова лентата не се разпъва навън, а започва широка и добавя отстъпване навътре:

padding-inline: max(20px, calc((100% - 1180px) / 2))

Процентите се изчисляват спрямо родителя на елемента, който тук е тялото на страницата и не включва лентата за превъртане. Под 1180 пиксела печели първата стойност и лентата запазва разумно отстъпване от 20 пиксела вместо отрицателно. Без втора обвивка, без JavaScript и без нищо за измерване по време на работа.

Къде се прилага

Началната страница, страницата „За нас“ и всяка статистическа страница. Една и съща конструкция и на трите места — в това беше и смисълът.