title: HTML logo not responsive
body: <p>I am making a website.  In its footer I have a logo. It's on the right place but when I visit the site with mobile, the logo is on the wrong position. </p>
  
  <p>It was working before and now it is not. I can't figure out why.  Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;footer class="page-foot bg-dark"&gt;
      &lt;section class="footer-content"&gt;
        &lt;div class="container"&gt;
          &lt;div class="rd-navbar-brand pull-lg-left"&gt;&lt;a href="index.html" 
  class="brand-name"&gt;
  &lt;img src="logo1.png" style="width: 35%" width="120px"&gt;               
  &lt;/div&gt;
          &lt;div style="text-align: left;"&gt;
          &lt;ul class="list-inline list-inline-mod-1 visible-md-inline-block 
  visible-lg-inline-block pull-sm-right"&gt;
            &lt;li&gt;&lt;a href="meadows.html"&gt;Rolling Meadows&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="heights.html"&gt;Attorney Arlington Heights&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="palatine.html"&gt;Lawyer Palatine &lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="mount.html"&gt;Attorney Mount Prospect&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="des.html"&gt;Lawyer Des Plaines&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="scha.html"&gt;Attorney Schaumburg&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="hoff.html"&gt;Hoffman Estates&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="elk.html"&gt;Attorney Elk Grove Village&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/footer&gt;
  </code></pre>
  
  <p><strong>CSS</strong> It's specifying the position for the logo</p>
  
  <pre><code>.page-foot .rd-navbar-brand {
     margin-bottom: -4%;
     margin-left: -18%;
  }
  </code></pre>
  
  <p>I am new in <code>CSS</code> and <code>HTML</code>, could you explain why this happens?</p>