1. У вас есть div create-comment__body (сложно сказать зачем он там, но есть). Он флекс.
Дальше вы его дочерним create-comment__item (в данной ситуации они пока тоже лишние (пока нет лейблов), а если будут, то это p, а не div) говорите, что они должны быть 48% от родителя. Пока логика вроде есть.
Но потом вы говорите инпутам, что они должны быть 90% от тех 48%.
Так вот, начать имеет смысл с ответа на вопрос, зачем вы написали про 48%, а потом про 90%.
2. Возвращаемся к 90%. Инпуты 90% от родителя. Но потом вы им задает отступы по 30+30 но уже пикселей.
Вопрос: при каких обстоятельствах 90% + 60px будут помещаться в родителя, а в каких нет.
Т.е. нужно либо использовать calc либо вспомнить о box-sizing border-box, чтобы отступы входили в ширину, а не плюсовались.
p.s.
3. Кнопки удобнее делать тегами button. Инпутами их делали, когда тег button ещё не родился.
4. Для доступности, у каждого поля формы должен быть label, причем желательно связанный со своим полем через id и for, даже если поле вложено в лейбл. Если нет видимой подписи в макете, то лейбл скрывают доступным способом через паттерн visually-hidden (гуглится).
Возможно, вам повезет: вы сделаете отступ чтобы псевдо попал на середину первой строки (удобно через calc, em с учетом размера шрифта и line-height), то будет хорошо смотреться и при нескольких строках.
А если не повезет, то на js выяснять сколько строк и в зависимости от этого задавать разные классы-модификаторы.
Сначала нужно выяснить откуда в кнопке взялся тег <hr>
Если по простому, тег <hr> служит для разделения логических разделов на сайте, если они по какой-то причине не сделаны с помощью section, article и т.д. Внутри кнопки hr никак не может оказаться.
Если вам нужна какая-то полоска внутри кнопки, то используйте стили. Псевдоэлементы или просто фон градиентом, как вам удобнее.
Текст написать.
Для пунктира: либо обычный border-radius и dashed либо SVG либо радиальный градиент поверх конического, если устраивает поддержка конического.
Давайте я вас научу открывать инструменты разработчика, а то вы так и будете про этот сайт спрашивать. Мы его уже выучили.
Нажимаете Ctrl+Shift+I или F12 или правой кнопкой мыши из контекстного меню.
Выбираете на вкладке Elements нужный вам элемент. Или нажимаете Ctrl+Shift+C и выбираете его прямо на странице.
И дальше на вкладке Style и Computed смотрите какие стили к нему применены.
Ох..
Даже не знаю, с чего начать..
Пусть так:
1. У вас есть div create-comment__body (сложно сказать зачем он там, но есть). Он флекс.
Дальше вы его дочерним create-comment__item (в данной ситуации они пока тоже лишние (пока нет лейблов), а если будут, то это
p, а неdiv) говорите, что они должны быть 48% от родителя. Пока логика вроде есть.Но потом вы говорите инпутам, что они должны быть 90% от тех 48%.
Так вот, начать имеет смысл с ответа на вопрос, зачем вы написали про 48%, а потом про 90%.
2. Возвращаемся к 90%. Инпуты 90% от родителя. Но потом вы им задает отступы по 30+30 но уже пикселей.
Вопрос: при каких обстоятельствах 90% + 60px будут помещаться в родителя, а в каких нет.
Т.е. нужно либо использовать calc либо вспомнить о box-sizing border-box, чтобы отступы входили в ширину, а не плюсовались.
p.s.
3. Кнопки удобнее делать тегами
button. Инпутами их делали, когда тег button ещё не родился.4. Для доступности, у каждого поля формы должен быть label, причем желательно связанный со своим полем через id и for, даже если поле вложено в лейбл. Если нет видимой подписи в макете, то лейбл скрывают доступным способом через паттерн visually-hidden (гуглится).