Как правильно верстать такие блоки?

Bootstrap 3.*:

<div class="container">
  <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
  </div>
</div>

Ну для адаптивности используйте классы col-lg-* col-md-* col-sm-* col-xs-*

Не надо float. Делаете через флексы, и ставьте блоку свойство
justify-content: space-between
тогда блоки равномерно распределятся по всей ширине. Если хочется ровно 25% ширины, то ставьте flex-basis: 25% каждому блоку.

Примерно так
Логотип оставляете в левой части.
Оставшееся помещаете в общий див и выравниваете справа, задав соответствующий класс.
Каждому элементу делаете враппер, которому задаете отступ слева, кроме последнего элемента.
Для именование классов используйте БЭМ, будет более понятно что к чему относится

Родителю display: flex

Далее, если хочется просто раскидать по контейнеру без заморочек, justify-content: space-between

О чем конкретно речь то?
Тут 4 блока, значит делается что то вроде:

<style>
.wrap {width:100%;margin: auto;}
.wrap .col {width:25%;float:left;}
</style>
<div class="wrap">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>