HTML徽标无响应

Question

我正在建立一个网站。 在页脚中有一个徽标。 位置正确，但是当我使用移动设备访问该网站时，徽标位置错误。

它曾经在工作，现在却没有。 我不知道为什么。 这是我的代码：

的HTML

<footer class="page-foot bg-dark">
    <section class="footer-content">
      <div class="container">
        <div class="rd-navbar-brand pull-lg-left"><a href="index.html" 
class="brand-name">
<img src="logo1.png" style="width: 35%" width="120px">               
</div>
        <div style="text-align: left;">
        <ul class="list-inline list-inline-mod-1 visible-md-inline-block 
visible-lg-inline-block pull-sm-right">
          <li><a href="meadows.html">Rolling Meadows</a></li>
          <li><a href="heights.html">Attorney Arlington Heights</a></li>
          <li><a href="palatine.html">Lawyer Palatine </a></li>
          <li><a href="mount.html">Attorney Mount Prospect</a></li>
          <li><a href="des.html">Lawyer Des Plaines</a></li>
          <li><a href="scha.html">Attorney Schaumburg</a></li>
          <li><a href="hoff.html">Hoffman Estates</a></li>
          <li><a href="elk.html">Attorney Elk Grove Village</a></li>
        </ul>
        </div>
      </div>
    </section>
  </footer>

CSS指定徽标的位置

.page-foot .rd-navbar-brand {
   margin-bottom: -4%;
   margin-left: -18%;
}

我是CSS和HTML新手，您能否解释为什么会这样？

Answer 1

.page-foot .rd-navbar-brand的利润空间为负-取消这些利润，它应该回到正确的位置！ 添加了一些底部填充，因此徽标的顶部/底部具有相同的填充。

@media (max-width: 767px){
  .page-foot .rd-navbar-brand{
    margin: 0 0 30px;
  }
}