Три блока. С помощью flex выстраиваешь в один ряд. Добавляешь нужные зелёные границы сверху и по бокам (кроме последнего элемента. Можно всем выставить border-right).
Нижний блок это будет отдельная сущность на зелёном фоне
Сделай два блока с нужными размерами (в относительных единицах). Это будет твоя левая и правая часть. Уже в них располагай контент. Тогда при изменении разрешения они не будут пересекать твою границу
Проверяйте ширину блоков. Скорее всего у вас где-то есть абсолютные значения, из-за которых происходит прокрутка. Их стоит перевести в относительные единицы. Не забывайте, что текст может выйти за границы своего родителя при экстремально малом разрешении
Он пишет, что не может найти такой файл для импорта. Пропишите полный путь к библиотеке. А сам же compass вроде по другому работает, а не просто импортом
1. У row, который внутри form
2. У row внутри которого «Нет записей!»
Ну и ширину потом для мобилок отдельно прописать. Хотя такое ощущение, что сетку с Bootstrap взяли, вот и используйте его col-* для придания ширины input
Потому что 100vh — это процент от высоты viewport (может ты имел в виду 100vw? Тогда уже от ширины), а width: 100% будет отсчитываться от ширины родительского блока. То есть обе величины отталкиваются от разных значений
Пробовал именно на мобильном устройстве? У DevTools есть неприятная вещь, что он обрабатывает viewport плохо. Попробуй перезагрузить страницу, или включить/выключить мобильный вид.
Тут не надо придумывать что-то. Кнопка внутри ссылки, соответственно любым образом наводя на кнопку мы попадаем на ссылку. Лучше не мучиться и вынести их за пределы друг друга.