Владимир Горбунов

Кодировку html поменяй в UTF-8. как в редакторе, так и укажи <meta charset="utf-8">

А зря ты так о друпале! У него есть расширение. Да и под wordpress что то есть. Не помню как называется! А так под такое дело надо кастомный движок(самопис)!

Если верстаете на bootstrap, то это два блока

<div class="container">
   <div="row">
      <div class="col-md-3">Sidebar</div>
      <div class="col-md-9">Content</div>
   </div>
</div>

@font-face {
    font-family: 'bebas_neuebook';
    src: url('путь до шрифта/bebas_neuebook.eot');
    src: url('путь до шрифта/bebas_neuebook.eot?#iefix') format('embedded-opentype'),
         url('путь до шрифта/bebas_neuebook.woff2') format('woff2'),
         url(путь до шрифта/'bebas_neuebook.woff') format('woff'),
         url('путь до шрифта/bebas_neuebook.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

В медиа запросе, для мобилы надо будет прописать для h3 и кнопки стили чтобы все казалось как надо!

Чтобы выглядело так как на картинке. Тебе надо обернуть всех column в еще один

например. и задать ему
.item { display: Inline-block }

я бы просто прописал

в body {
overflow-x: hidden;
}