заголовок перемещается вправо в bootsrap4, когда я использую контейнер и класс строк, в то время как он должен быть центрирован с шириной 12 столбцов?

Question

У меня возникла эта проблема с bootstrap раздел заголовка не работает, как это должно быть в контейнере и классе строки. это мой код в заголовке. php в wordpress:

  <div class="container">  
 <div class="row">


<div class="site-header col-sm-12"> 

    </div><!-- #site-header -->

      </div>     </div>  

и это мой нижний колонтитул. php код:

<footer id="colophon" class="site-footer col-sm-12 ">
        <div class="site-info">

        </div><!-- .site-info -->
        </footer><!-- #colophon --> </div> </div>

это мой css код:

.site-header {
        background-color:yellow; 

 width:100%;

  height: 140px;
  position: fixed;    
  z-index: 1000;    

  box-sizing: border-box;


}

    .site-footer  {
    width: 100%;
  height: 125px;    
  background-color:#f64848; 

  box-sizing: border-box;   }

теперь, когда вы go переходите на URL моего сайта: http://webdesignleren.com/

вы можете видеть, что заголовок сдвинут вправо, хотя он должен быть по центру, как нижний колонтитул ниже. Я перепробовал все, чтобы решить проблему, но без результатов. также текст и изображения под заголовком находятся в хорошем порядке с интервалом с обеих сторон. почему bootstrap делает это только для заголовка. остальное в порядке. когда я использую контейнерную жидкость, нет проблем, но я не хочу использовать контейнерную жидкость, потому что на больших экранах она показывает 100%, что выглядит ужасно. В чем проблема с контейнером, что он действует так для заголовка. как я могу решить эту проблему.
минус поле слева для класса заголовка не помогает, потому что, когда я изменяю размер экрана, проблема возвращается. спасибо, Йоханнес