ウィンドウのサイズを変更したときに特定の要素を最後に減らすにはどうすればよいですか？

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