当调整窗口大小时，如何使特定元素最后减少？

Question

我正在尝试创建一个中心内容框，其功能实际上与Stackoverflow的功能相同。如果用户通过拖动浏览器的边缘来缩小窗口大小，则页面的主要内容不会在页边距和其他元素之后减少。

所以我对我的HTML有这个：

<div class="navbar">
<div>Title</div>
<a href="index.html">Home</a>
<a href="filler1.html">filler1</a>
<a href="filler2.html">filler2</a>
</div>


<div class="content">
 testing123
</div>

对于我的CSS：

body {
margin:0; // Because I have a navigation bar at the top that wouldn't quite reach
// the full length of the page
margin-top: 100px; //to stop other elements covering the navigation.
background-color: #ffffee
}

.content {
background-color: white;
overflow-wrap: break-word;
border: 3px solid rgb(0, 0, 0);
padding: 20px;
position: relative;
max-width: 1500px;
min-width: 1500px;
left: 100px;
}

感谢。

Answer 1

只需给它一个最大宽度并将其居中：

.content {
    ...
    margin: 20px auto;
    max-width: 400px;
}

Demo