html - 扩大视野后，网站看起来更糟。不确定为什么更改最大宽度可以解决问题

Question

我被告知我的网站有一个小的 CSS 错误，如果将 View 展开，侧边栏会渗入正确的文本中。网站

这是我的CSS:

.container {
  margin: 0 auto;
  max-width: 1160px;
}

.masthead {
  background-color: $hot-orange;
  float:left;
  position: fixed;
  height: 100%;
  width: 32%;

  @include mobile {
    height: 35%;
    text-align: center;
    top: 0;
    width: 100%;
  }
}

.main-body {
  float: right;
  width: 68%;
  padding: 0 10% 0 8%;

  @include mobile {
    height: 65%;
    width: 100%;
  }
}

我的 html:

<div class="container">
      <div class="masthead clearfix">
        <div class="masthead-content">
          <a href="{{ site.baseurl }}/" class="site-avatar"><img src="{{ site.avatar }}" /></a>

          <div class="site-info">
            <h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
            <p class="site-description">{{ site.description }}</p>
          </div>

          {% include nav.html %}
          <div class="wrapper-footer">
            <footer class="footer">
              {% include svg-icons.html %}
            </footer>
          </div>
        </div>
      </div>

      <div class="main-body" id="main" role="main" class="container">
        {{ content }}
      </div>
    </div>

一旦 View 超过 chrome 开发工具中的 1160，左侧的粉红色导航栏就会开始渗入右侧。知道为什么吗？如果我将最大宽度更改为 1600px，问题就解决了，但我不知道为什么或问题是什么。为什么当我的宽度加起来达到 100% 时，左右两个部分会相互渗入？

Answer 1

因为您的侧边栏位于 fixed 位置，它从文档中计算出 32% 宽度，因此它基于您窗口的全宽而不是您的 container。修复它的最简单方法是也给侧边栏一个最大宽度，这次计算的最大宽度是相同的百分比，但这次计算容器的最大宽度(所以:1260/100 * 32)。试试这个:

.masthead { max-width: 403px; }