How to properly mark up HTML when building with Bootstrap?

Question

HTML

Hello! Please tell me how to do html markup when verst with bootstrap?
There is a website layout.

1. Site header. To align all the text in a block-text block, simply write text-align: center to align it.
2. The second about block. Here, in general, I put everything in one row. And gave the about block also text-align: center. But it turns out not like on the layout. But in order to be like on the layout, I had to give not col-md-12, col-md-8 col-md-offset-2. That's when everything fell into place. This is fine? It seems to me that I'm doing something wrong. What do you think?

<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>

Answer 1

I did not read your code, but I hope my answer suits you: https://codepen.io/anon/pen/rmgedw
Ps:
Got it. <div class="block-text">must also be a container, i.e.<div class="container block-text">