title: Bootstrap, header/banner, matching width and positioning to body
body: <p>I'm new to Bootstrap, and trying to redesign a website made originally by someone else. It's a WordPress site using the Roots theme, so it has Bootstrap installed. I would like to use an image as a header/banner. I would like the image to be the same size and positioning as the body, at all widths. My code so far is not working. The banner image is not resizing, and it's not aligned with the body at any browser width. Here's what I have now: (the site is <a href="http://brilliantzenaudio.com" rel="nofollow">http://brilliantzenaudio.com</a>)</p>
  
  <p>In templates/header.php,</p>
  
  <pre><code>&lt;header class="banner" role="banner"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
         &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
           &lt;img src="&lt;?php get_template_directory(); ?&gt;/assets/img/brav-banner-2.jpg"&gt;
         &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Some excerpts from app.css that I think are relevant. Let me know if there seems to be something missing here (I can't post all of app.css, it's hundreds of lines),</p>
  
  <pre><code>.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";
  }
  </code></pre>