title: Bootstrap 3 uneven header color
body: <p>I didn't really know how to put it in words so here is what i actually need to create but have no idea how.</p>
  
  <p>I'm using the latest version of bootstrap</p>
  
  <p>This is the desired effect
  <a href="https://www.dropbox.com/s/uwq39tbswp44j1i/desired.jpg?dl=0" rel="nofollow">https://www.dropbox.com/s/uwq39tbswp44j1i/desired.jpg?dl=0</a></p>
  
  <p>and this is what I currently have</p>
  
  <p><a href="https://www.dropbox.com/s/ksvgf9ohdmln6xe/Screenshot%202015-05-03%2002.01.19.png?dl=0" rel="nofollow">https://www.dropbox.com/s/ksvgf9ohdmln6xe/Screenshot%202015-05-03%2002.01.19.png?dl=0</a></p>
  
  <p>this is the markup</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
     &lt;img class="img-responsive" src="logo.png"&gt;
     &lt;h1&gt;The text&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>so what would you recommned the site has to be responsive and in terms of mobile version i think the best case sceneario would either be smaller font or stack it on top of each other.</p>
  
  <p>Please help me I'm quite desperate.</p>