monochromer

Попробуйте так:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

И убедитесь, что дочерние элементы не "вылазят" из своих контейнеров.

Если файл index.html лежит внутри директории build и при условии baseDir: "./" для browser-sync, то путь нужно прописать так:

<link rel="stylesheet" href="build/css/<some-css-filename.css>">

Но я бы поменял директорию сервера: baseDir: "./build" и тогда пути записывались бы так:

<link rel="stylesheet" href="css/<some-css-filename.css>">

Задавать псевдоэлементы ::before и ::after для input некорректно. Либо делайте иконку как фон у input, либо оборачивайте input в элемент-обертку и позиционируйте иконку относительно этой обертки.

Варианты
1. Использовать любой способ, который создаст пространство размером с position: fixed-элемент.
2. position: sticky

Галка в чекбоксе на внутренних страницах Chrome рисуется дивом и наклоняется с помощью transform.

.box {
  flex: 0 0 auto;
}

  .box:nth-child(2) {
    flex: 1 1 0%;
  }

  .box + .box {
    margin-left: 1rem;
  }

Лично я склоняюсь к 2-м способам:

1. Односторонние margin
https://csswizardry.com/2012/06/single-direction-m...

2.Использование преимущественно padding по принципу лего.
Почитать можно здесь или здесь.

Если использовать JavaScript для отправки данных, то инпуты можно заменить на contenteditable
https://jsfiddle.net/do8Lq0u9/

https://jsfiddle.net/9aqchcsf/1/

<div data-number="1"></div>
<div data-number="2"></div>
<div data-number="3"></div>

[data-number]::before {
  content: attr(data-number);
}

  [data-number="1"] { color: red; }
  [data-number="2"] { color: blue; }
  [data-number="3"] { color: green; }

CSS Columns больше подходит для создания мультиколоночного текста, как в газетах и журналах, а не для создания структуры. Используйте для решения задачи CSS Grid, FlexBox, inline-block, float, table-cell в зависимости от нужной поддержки браузеров.