monochromer

.box {
  flex: 0 0 auto;
}

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

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

border-spacing: 0;
или
border-collapse: collapse;
возможно, для надежности табличных layout'ов
table-layout: fixed;

Лично я склоняюсь к 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; }

В редьюсере нужно по умолчанию возвращать уже имеющeеся состояние

function reducer(state = initialState, action) {
  switch (action.type) {
     // ...
    default:
      return state
  }
}

Форматируйте код перед публикацией вопроса

Задача не понятна.
Если нужно, чтобы страница просто масштабировалась под viewport браузера нужно удалить мета-тег

<meta name="viewport" content="width=device-width, initial-scale=1.0">

, причем 2 раза

Если все-таки задание не точное - использовать css можно, а нельзя @media-запросы, то нужно использовать относительные единицы измерения - %, и vw, vh, vmax, vmin, em, rem для задания размеров и отступов

<meta name="format-detection" content="telephone=no">

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

Пользуйтесь include самого pug'а

@media screen and (min-width: 600px) {
  .site {
     min-width: 1568px;
     grid-template-columns: 1fr 500px 500px 1fr;
  }
}

При размере окна 600px размер блока .site уже будет не меньше 1568px плюс есть 2 колонки шириной 500px каждая. Отсюда и горизонтальная прокрутка.

В принципе так и делается, только лучше задание ширин колонок вынести в теги col и colgroup, чтобы избежать дублирование для каждой строки

<colgroup>
  <col style="width: 40px" />
  <col style="width: 20%" />
  <col />
  <col style="width: 120px" />
</colgroup>

-
  var data = {
    html: '<ul><li>1</li></ul>'
  };

//- вставится с экранированием
div #{data.html}

//- вставится без экранирования
div !{data.html}

Ленивая загрузка компонента через code splitting

Базовый функционал Codepen бесплатен. Заплатить нужно, если хочется пользоваться проектами (отличие проектов от pen'ов в том, что можно создавать свои папки и файлы), хранением ресурсов (картинки, шрифты), совместной работой, приватными наработками и др. Также в Codepen гораздо удобнее организовывать блоки с кодом и превью, чем в jsfiddle. Плюс элементы социальной сети.

Другие сервисы:
JS bin https://jsbin.com
CodeSandbox https://codesandbox.io/
Plunker plnkr.co
CSSDeck cssdeck.com