Павел Радьков

Правильно использовать calc:

.project-preview {
    width: calc(50% - 20px);
    margin: 10px;
    ...
}

caniuse.com/#search=calc — поддерживается от IE9 и выше.

<meta name="viewport" content="width=device-width">

ставьте, только если у вас адаптивная верстка. Эта настройка пытается сохранить масштаб шрифта, но уменьшить ширину колонки до ширины экрана браузера. Если сайт не адаптивный, появится горизонтальная прокрутка. При изменении ориентации устройства, масштаб отображения не меняется.

<meta name="viewport" content="width=1024">

ставьте, если у вас сайт фиксированной ширины или резина с минимальной шириной. В этом случае сайт уменьшится в масштабе, чтобы колонка шириной 1024px помещалась без горизонтальной прокрутки. Конкретное значение подбирается исходя из минимальной ширины верстки. При изменении ориентации устройства с портретной на ландшафтную, масштаб сайта увеличится, чтобы занять новую ширину.

Если градиент двухточечный, эмулируйте градиент при помощи box-shadow.
paulradzkov.com/demo/box-shadow_instead_gradient/i...

Пропишите всем <input type="radio" ... > одинаковый name — это объединит их в радиогруппу.

thenewcode.com/852/A-Fresh-Approach-to-Responsive-... — эту ссылку нашел в описании к демке.

Можно пойти другим путем и покрасить фоны https://jsfiddle.net/r0qrmo5q/3/

Не дробите сетку на большое число колонок, это не поможет. Управлять такой сеткой будет тяжело, но всё равно попадутся сайты, которые в неё не лягут.

Я для себя сделал генератор flexbox-сеток на LESS: под каждый конкретный проект я могу сгенерить сетки с разным количеством колонок, гуттерами разной ширины и разными media брейкпоинтами. Всё настраивается при помощи 5 переменных. По-умолчанию моя сетка старается быть похожей на бутстраповскую 12-колоночную, как самую привычную. Но некоторые фишки я утянул из сетки Zurb Foundation 6.

paulradzkov.com/flxgrid.css

К тому же, flexbox настолько гибкий, что колонки могут распределять между собой ширину автоматически.
Посмотрите пример paulradzkov.com/flxgrid.css/#auto-width-columns

Можно смешивать колонки с явно заданной шириной (фиксированной или в процентах) и автовыравнивающиеся колонки. Т.е. дизайн сайта не обязан быть выровнен строго по вертикальным направляющим, как с float-сетками.
Flexbox-cетку можно подстроить под почти любой дизайн, дописав немного кастомного кода.

tympanus.net/codrops-playground/SaraSoueidan/G3Gjv...

Это нужно делать градиентом:
- сверстать 6 цветов градиентом,
- поставить background-size: 600px 4px — чтобы каждая полоска была равно 100px,
- повторять фон только горизонтально background-repeat: repeat-x;

.container {
    margin: auto;
    background: #FFF;
    max-width: 960px;
    background-image: linear-gradient(to right,
        #50B5AD 0%,     #50B5AD 16.67%,
        #FFBBB7 16.67%, #FFBBB7 33.33%,
        #F8506C 33.33%, #F8506C 50%,
        #ADB347 50%,    #ADB347 66.67%,
        #F5CE42 66.67%, #F5CE42 83.33%,
        #A2DBD6 83.33%, #A2DBD6 100%);
    background-size: 600px 4px;
    background-repeat: repeat-x;
}

codepen.io/paulradzkov/pen/eZydxg

Можно поставить размер шрифта в зависимости от размеров экрана, но через calc() задавать минимальное значение.

В этом примере ( codepen.io/paulradzkov/pen/jqYqgY ) размер шрифта заголовка никогда не будет меньше 16px (1em):

h1 {
    font-size: calc(1em + 4vw);
}

Можно использовать более сложные формулы совместно с @media. Тут размер шрифта плавно меняется от 14 до 18px в диапазоне от 480 до 1024px.

@media (min-width: 480px) and (max-width: 1024px) {
  p {
    font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
  }
}

До 480 и после 1024px размер задан жестко с использованием @media.

Но в целом это все сложно и редко нужно. Я обычно задаю размер фиксированно на двух-трёх диапазонах при помощи @media.

UPD: можно даже заставить текст максимально заполнять площадь вьюпорта codepen.io/CrocoDillon/pen/fBJxu

По скриншотам трудно гадать, может дело в таблице, которая, скорее всего, генерится скриптом.

Вот пример рабочего лэйаута c фиксированными хеадером и футером и прокруткой посередине codepen.io/paulradzkov/pen/mPwyYO?editors=1100

Общая рекомендация: не использовать короткую запись «flex: 1», т.к. в разных браузерах есть разночтения по поводу. Лучше указывать явно «flex-grow: 1».
Про этот и другие баги флексов можно почитать тут https://github.com/philipwalton/flexbugs

1. Убедитесь, что масштаб страницы в браузере в обоих случаях одинаковый и равен 100%
2. Проверьте, а не разные ли шрифты. Для этого во вкладке «Computed» в самом низу посмотрите какими глифами отрендерен текст.



3. Если разные, проверьте во вкладке «Networks», правильные ли подключены веб-шрифты. Грузятся ли.
4. Если пути у шрифтов правильные, но не грузятся, посмотрите этот ответ Почему могут слетать шрифты, после заливки на хостинг?