<div class="wrap">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia rem voluptatibus ratione dolore veritatis porro dicta, vero iure aliquam. Sequi, numquam. Optio fugit repellat possimus velit laborum, dolore aliquam obcaecati.</p>

  <div class="box">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum quae consequuntur labore saepe, neque veniam ducimus laboriosam error fugit quas eaque. Reprehenderit cum tenetur delectus aut laudantium eum eius illo!
  </div>
</div>

body {
  container: body / inline-size;
  margin: 0;
}
.wrap {
  max-width: 600px;
  margin: auto;
}
.box {
  margin-inline: calc(50% - 50cqw);
  padding-inline: calc(50cqw - 50%);
  padding-block: 2em;
  background: #333;
  color: #fff;
}