切换页面时，后台标题会改变大小

Question

我想弄清楚为什么从一个页面切换到另一个页面时我的背景会变大。他们的风格是完美的主页。但是，当我切换到投资组合或联系页面时，它会向我添加填充。

header {
  background-color: white;
  display: inline-block;
  top: 0;
  width: 100%;
  background-attachment: fixed;

}

header h1 {
  float: left;
  display: block;
}

header ul {
  float: right;
  display: block;
  list-style: none;
}

header li {
  display: inline-block;
  padding: 10px;
}

    <header>
      <!--site title-->
      <h1>
        Clayton J. Batchelor
      </h1>

        <!--Navigation section-->
        <ul>
          <li>
            <a href="index.html">
              Home
            </a>
          </li>
          <li>
            <a href="portfolio.html">
              Portfolio
            </a>
          </li>
          <li>
            <a href="contact.html">
              Contact
            </a>
          </li>
        </ul>

    </header>