Как правильно делать HTML разметку при верстке с Bootstrap?

Всем привет! Скажите, пожалуйста, как правильно делать html разметку при версте с bootstrap?
Есть макет сайта.

1. Шапка сайта. Чтобы выровнять весь текст в блоке block-text просто прописать text-align: center для выравнивания.
2. Второй блок about. Здесь вообще все в один row засунул. И дал блоку about тоже text-align: center. Но получается не как на макете. Но чтобы было как на макете пришлось дать не col-md-12, col-md-8 col-md-offset-2. Вот тогда встало все на свои места. Это нормально? Мне кажется, я что-то не так делаю. Что скажете?

<header>
  <div class="container">
    <div class="row">
      <div class="top-nav">
      <div class="col-md-6">
        <div class="top-logo">
          Логотип
        </div>
        </div>
    <div class="col-md-6">
        <div class="menu">
        Меню
      </div>
        </div>
      </div>
    </div>
    <div class="block-text">
    <div class="row">
      <h4>маленький заголовок</h4>
      <h1>Большой заголовок</h1>
      <p>курсивный текст</p>
    </div>
    </div>
    <div class="btn">
    <a href="#">Кнопка</a>
    </div>
  </div>
</header>
<section class="about">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
      <h2>Заголовок</h2>
      <p>Текст</p>
      <figure>
      <img src="" alt="" />Картинка
      </figure>
      </div>
    </div>
  </div>
</section>