центрирование заголовка h4 для меньших размеров экрана

Question

У меня есть строка с 2 центрированными столбцами. На нормальном размере экрана все выглядит нормально, хотя, когда я тестирую его на меньшем экране, таком как мобильный телефон, столбцы центрируются не полностью. Кто-нибудь может сказать мне, почему?

<div class="container">
    <div class="row">
        <br />
        <h4 style="text-align:center;"><strong>Organisation Booking Details</strong></h4>
        <br />
        <div class="col-md-5 col-md-offset-2">
            Col1
        </div>
        <div class="col-md-3">
            Col2
        </div>
    </div>
</div>
<hr />
<div class="row" style="margin-left:4px;">
    <div class="col-md-3 col-md-offset-4" >
       Col3
    </div>
</div>

Экран обычного размера выглядит нормально:

Меньший экран (столбцы не центрированы должным образом):