html - CSS 破壊測定ウィンドウ サイズ

Question

Jekyll (-v 0.12.1) で実行されているブログのスタイルを設定していて、index.html のウィンドウ サイズを測定すると 1103px で、投稿ページの同じ変更されていないウィンドウが (XScope を使用して) 1088px になるという問題が発生します。

これにより、ヘッダーのロゴがページからページへと数ピクセル「シフト」されます。理由は一生わかりませんが、余白/幅を設定すると、投稿ページのウィンドウの測定値が減少することを除いて (ただし、索引にはありません）。

post.html

---
layout: default
---

<section class="post">
  <div class="container">
    <article class="centered">

      <header class="post-header">
        <div class="post-meta">{{ page.date | date: "%b %d, %Y" }}</div>
        <h1 class="post-title">
          <a href="{{ page.url }}">{{ page.title }}</a>
        </h1>
      </header>

      <div class="post-body">

      {{ content }}

      </div>

    </article>
  </div>
</section>

ポストCSS

.post {
  margin-top: 2rem;

  .post-header {
    margin-bottom: 2rem;

    .post-meta {
      margin-bottom: 0.3rem;
      font-family: $font-family-sans;
      color: $light-text-color;
      font-weight: 300;
      text-align: center;
      font-size: 0.8rem;
      text-transform: uppercase;
    }

    .post-title {
      @extend .beta;
      @extend %hN;
      font-family: "proxima-nova-alt-ext-cond", sans-serif;
      text-transform: uppercase;
      text-align: center;
    }
  }
} 

.container {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  max-width: 63em;
}

.centered {
    max-width: 31rem; 
    width: 80%;
    margin: 0 auto;
    display: block;
}