相同的字体大小，不同的渲染大小

Question

在页脚内部，我有2个div。在这两个div中都有一个p，其中包含一些文本。但是，第二个div中的文本即使应用了相同的CSS也要大很多。

如果我在浏览器中禁用了font-size属性，则所有文本都会变小，但是底部div中的文本仍会变大...

请参见img及其结果：weird result

我希望所有文本都一样大小。

<div class="footer">
  <div class="info">
    <div>
      <p>
        <b>KSA Nationaal</b>
      </p>
      <p class='spacer'>02/201.15.10</p>
      <p>Vooruitgangstraat 225</p>
      <p class='spacer'>1030 Brussel</p>
      <p class="spacer">
        <a href="http://www.ksa.be">www.ksa.be</a>
      </p>
    </div>
    <div>
      <p>
        <b>De leukste safari van 2018!</b>
      </p>
      <p>Joepie 28</p>
      <p>16-19 april</p>
      <p class='spacer'>Sjo’ers, simmers en jonghernieuwers</p>
      <p>
        <b>Contact</b>
      </p>
      <p class="spacer">
        <a href="mailto:joepie@ksa.be">joepie@ksa.be</a>
      </p>
    </div>
    <div>
      <img src="http://www.ksa.be/sites/all/themes/custom/tksa/img/logos/logo-blauw.png">
    </div>
  </div>
  <div class="legal">
    <p>
      Deze website kwam tot stand dankzij: Mira Sabbe: lay-out website • Maarten Derous: illustraties • Yann Provoost: ontwikkeling
      website
    </p>
    <p>© 2018 KSA Nationaal - Alle rechten voorbehouden</p>
  </div>
</div>

和CSS：

p{
    font-size: 1.8rem !important;
}

.footer {
    width: 100%;
    box-sizing: inherit;
    background-color: $purple;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    p {
        color: white;
    }
    a {
        color: white;
    }
    .info {
        width: 100%;
        box-sizing: border-box;
        padding: 1rem 9rem 1rem 9rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        p {
            margin: 0;
        }
        .spacer {
            margin-bottom: 1.4rem;
        }
    }
    .legal {
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0 9rem 0 9rem;
        width: 100%;
        text-align: center;
    }
}

找到的解决方案：将text-size-adjust元素的p属性设置为none