И инпута есть ширина по умолчанию. А не auto, как обычно.
Соответственно, если вы зададите max-width: 100% это не поможет, потому что это даст ширину родителя.
А значит, нужно действовать по-другому, например, либо использовать calc либо задать padding родителю вместо margin инпуту.
Genri_Rus, погуглите как устроены таблицы: снаружи таблица, в ней строки, а в них ячейки.
Есть ещё всякие волшебные вещи типа thead, col,и т.д. но их опустим, нам они не нужны сейчас.
ul - таблица
li - строка
span - ячейка.
Не хотите использовать dl (почему, кстати?), то хотя бы замените два span, на заголовок и параграф? Ну чтобы хоть как-то семантика была похожа на семантику.
Рассказать себе (можно даже вслух), что нужно для того, чтобы они были на весь экран (скорее всё таки вьюпорт, а не экран).
Проверить наличие этих свойств в коде.
Если свойства есть, а всё не так, как вам хочется, можно начать обводить элементы рамочками и выяснять, кто им мешает. Например, фиксированная ширина кого-то из родителей. Или что-то ещё.
Если самостоятельно никак не получилось, то делайте песочницу с видимой проблемой на codepen.io и зовите.
Антон Литвиненко, очень может быть.
Мне она почему-то сразу не приглянулась и прошла мимо. Каких-то конкретных причин у меня нет. И если с кодом больше никто не работает, то почему бы и нет.
torbach, и зачем мужику абсолют?
Мужика и чат можно слить в одно изображение и перестать делать его абсолютом.
Оберните его в figure или в div.
Почему вы считаете точки контентным изображением?
Сделайте псевдоэлемент к этой figure с точками на фоне и вот его абсолютом.
Если мужик и чат должны существовать отдельно, то расположите их гридом.
miss_allegory, fisrt-child находит первый дочерний элемент своего родителя, если он соответствует условию.
Он не может найти третий или какой-то ещё, как вы хотели.
А у меня обычные соседние селекторы и not.
Вроде выше есть целых два достаточно прямых решения.