html - ブートストラップ、ヘッダー/バナー、幅と位置を本文に合わせる

Question

私は Bootstrap を初めて使用し、最初に他の人が作成した Web サイトを再設計しようとしています。Roots テーマを使用した WordPress サイトなので、Bootstrap がインストールされています。画像をヘッダー/バナーとして使用したいと考えています。画像は、すべての幅で本文と同じサイズと配置にしたいと考えています。これまでの私のコードは機能していません。バナー画像はサイズ変更されておらず、ブラウザーの幅で本文と整列していません。これが私が今持っているものです：（サイトはhttp://brilliantzenaudio.comです）

templates/header.php で、

<header class="banner" role="banner">
  <div class="container">
    <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <img src="<?php get_template_directory(); ?>/assets/img/brav-banner-2.jpg">
       </div>
    </div>
  </div>
</header>

関連すると思われる app.css からの抜粋。ここに何か欠けているように思われる場合はお知らせください (app.css のすべてを投稿することはできません。数百行あります)。

.content {
   background:#fff;
   padding-top:2em;
}
.home .content {
   padding-top:0;
}

.main { }
.page-header {
   margin: 10px 0 20px 0;
   background: #222;
   padding: 5px;
   border-radius: 5px;
}
.page-header h1 {
   color:#fff;
   margin:0;
}
.page-header h1:before {
   content:  "\00bb";
}