title: How can I put the Image in the top-left corner, while still being responsive?
body: <p>I am new to Angular/Bootstrap and currently trying to put an image on top of the navigation bar in the top left corner. Using padding/margin could fix the problem with a normal resolution/static screen size, changing the size put the image elsewhere.</p>
  
  <p>I have tried to use padding and margin, but as I said, it was not possible, to make it "sticky" in the top left corner, when changing the browser sice.
  Also using the bootstrap classes, for example "pull-right" (just for test-cases) did not work.</p>
  
  <p>My current code looks like: </p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="cloud"&gt;
          &lt;!-- Navigation --&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-dark $green static-top"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="navbar-brand" href="#"&gt;
                      &lt;img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" class="pull-right" alt="" width="431.27" height="55.35"&gt;
                  &lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                      aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
                      &lt;ul class="navbar-nav ml-auto"&gt;
                          &lt;li class="nav-item active"&gt;
                              &lt;a class="nav-link" href="#"&gt;Home
                                  &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#"&gt;Profile&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#"&gt;Impressum&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="first"&gt;
          &lt;h1&gt;TestSite&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>I expected an image in the top left corner that is responsively staying there while changing browsersizes/devices</p>