Html 将视图扩展到广域后，站点看起来更糟。不确定为什么更改“最大宽度”可以解决此问题

我被告知，我的网站有一个小的css错误，如果视图被扩展到很宽的地方，侧栏就会变成正确的文本。 场地

这是我的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>

{{site.description}
{%include nav.html%}
{%include svg-icons.html%}
{{content}}

---

一旦视图通过chrome开发工具中的1160，左侧粉红色导航条开始向右侧流血。知道为什么吗？如果我把最大宽度改成1600px，问题就解决了，但我不知道为什么或者是什么问题。当我的宽度加起来达到100%时，为什么左右两半互相流血？

因为你的边栏是定位的

固定的

它根据文档计算了

32%

宽度，所以它基于你的窗口的全宽，而不是你的

容器

。解决这个问题的最简单方法是给边栏一个最大宽度，这次是一个计算出的最大宽度，它是相同的百分比，但这次是计算出容器的最大宽度（所以：

1260/100*32

）。试试这个：

.masthead { max-width: 403px; } 

---

你能提供工作代码吗？我把它放在一个片段中，它对我不起作用-我看不出你在说什么，这有点难调试CSS。访问iamthemangosteen.com或下载repo，并使用jekyll serveI运行它。我还修复了这个问题，从容器中删除了max width，将其替换为与事实上，你的边栏是固定的，这意味着它总是相对于窗口而不是容器。但是这会破坏报头的响应性和适应性不，不会。

最大宽度

不会影响“自适应性”。尽管如此，你的网站两边都会有空白，但这不是；我不会改变任何事情，只是把它限制在一定范围内。