Дима Паутов

Вообще правильно так

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">

</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">

</div>
</div>
</div>
</div>
</header>

Проще мне кажется понять, это глянуть на таблицы. Ибо принцип тот же

<header>
<table>
<tr>
<td>
<div class="top-line">

</div>
</td>
</tr>
<tr>
<td>
<div class="bottom-line">

</div>
</td>
</tr>
</table>
</header>

Но использовав 1й пример, то для вложенных в блок .top-line или .bottom-line строк нужно писать так:

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>

Нет смысла еще раз вложенный контент оборачивать в блок .container

Стили похожи на бутстраповские
getbootstrap.com/css/#tables
getbootstrap.com/css/#forms

jsfiddle.net/mzj0nk13 - display: table
jsfiddle.net/mzj0nk13/1 - display: flex

Разница в кроссбраузерности!

codepen.io/bootd/pen/wKEmJv

Кто вам сказал такую чушь? Он по центру, просто letter-spacing увеличило ширину символа, от этого цифра и сместилась!

jsfiddle.net/Lmbrydhb

Стандартный css с использованием процентов или flexbox. Просто воспользуйтесь любой сеткой и проблема решена!

Скрин хоть дайте.
Но я думаю знаю ответ!
Вы наверняка подключили свой шрифт с обычным начертанием. После, указали какому либо тексту произвольное начертание, например жирное. Но в шрифт не имеет такого начертания, либо имеет, но вы его не подключили в шаблон. Браузер пытается отрендерить текст, шрифт которого не имеет указанного начертания. От этого он немного расплывается.

Более детальный пример: Если вы подключаете на сайт шрифт, например Roboto и он будет использоваться как основной, то нужно подключать все начертания шрифта. Жирный, обычный, курсив, жирный курсив, тонкий и т.п.

jsfiddle.net/1brxj52m
Оформляем сами! Удачи

Судя по css значениям, это самая простая сетка от бутстрапа))) и отличается только наименованием класса!

А если по делу, то раньше, когда не было сеток, никто не делал адаптивные сайта. Да и в сетке нет ничего магического, это просто удобная структура для расположения блоков. Просто тогда их еще не придумали. Либо делали через скрипты. Раньше были таблицы. А сетку придумали чуть после, для замены таблиц. Т.к. таблицы это не тот html тег для постраения структуры шаблона и в плане css не такой гибкий как div.

.cols.col-6 - можно заменить на .leftCol и rightCol, каждой дать ширину по 50% ну и флоат. Так и было.