お世話になります。

.text {
    background: #fff;
    border-radius: 8px;
    padding: 16px 24px;
    max-width: 60%;
    line-height: 1.8;
}

上記の様に、max-width: 60%; と指定されています。
ただ、親要素にはどれも width の指定はされていません。
同じ様な説明が「 JavaScript でモーダルウィンドウを作ろう / #04」でありますが、
こちらのサイトも読んで、考えてみました。
「包含ブロック」を画面（ビューポート）として計算されているのでしょうか？

ただ、 Google のデベロッパーツールの「 Responsive 」で画面の幅を 1000px としてみた場合に、
<div class="text></div> の領域は、最大で width: 561.2px; 、 padding: 24px; (左右)となりました。
この場合は、どうもパディングも含めた領域となっているのです。
max-width はパディング領域で計算するのでしょうか？
（ box-sizing: border-box; と指定されているなら理解できますが...)