<div class="layout">
  <div class="container-1">
    <div class="box">awesome box</div>
  </div>

  <div class="container-2">
    <div class="box">awesome box</div>
  </div>

  <div class="container-3">
    <div class="box">awesome box</div>
  </div>
</div>
[class^="container"] {
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
  margin: 0 auto;
}

.container-1 {
  width: 800px;
}

.container-2 {
  width: 400px;
}

.container-3 {
  width: 200px;
}

.box {
  font-size: 8cqi;
  padding: 3cqi;
  background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
}

.layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.