html - CSS打破测量的窗口大小

Question

我正在设计一个在 Jekyll (-v 0.12.1) 上运行的博客，并遇到一个问题，即测量 index.html 的窗口大小为 1103 像素，然后帖子页面上相同的未更改窗口将测量 1088 像素（使用 XScope）。

这导致标题徽标在页面之间“移动”几个像素，我一生都无法弄清楚原因 - 除了设置边距/宽度会减少帖子页面上的窗口测量值（但是不在索引上）。

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;
}