title: Bootstrap navbar brand image on the left of the jumbotron
body: <p>I am creating a website as part of my exercise. I am supposed to put a navbar inside a jumbotron, and I've done it already. The problem is, when I put an image, it is not on the left-most part of the jumbotron. Rather, it is located on the left-most part of the navbar. Now I tried moving the image -55 pixels to the left so that it is located at the left-most part of the jumbotron and it works. However if I try it on smaller screens, the image suddenly goes past the left-most part of the screen. Do you have any ways of ensuring that my image is still on the left-most part of the jumbotron, while still maintaining its responsiveness? Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.navbar-header &gt; a &gt; img {
    padding: 0px;
    margin: 0px auto;
    position: absolute;
    left: -55px;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
              &lt;div class="jumbotron"&gt;
                  &lt;nav class="navbar navbar-default" role="navigation"&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;a class="navbar-brand" href="#"&gt;&lt;img src="http://demo.drupalizing.com/bluemasters/site/sites/all/themes/bluemasters/logo.png" class="img-responsive" width=274 height=56&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="navbar-right navbar-collapse collapse" id="navbar"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;h4&gt;Home&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;h4&gt;About&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;h4&gt;Portfolio&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;h4&gt;Blog&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;h4&gt;Contact&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance.</p>