嗨，我是新的网络开发，我真的很想知道为什么在下一个代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid black;
}

html {
  font-family: "Rubik", sans-serif;
  color: #444;
}

.container {
  margin: 0 auto;
  width: 1200px;
  background-color: #107b72;
}

header {
  background-color: rgb(31, 210, 103);
  /* height: 100vh; */
}

nav:first-child {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  background-color: green;
}

h1 {
  /* value of space scale */
  font-size: 52px;
  margin-bottom: 32px;
}

p {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 48px;
}

.btn:link,
.btn:visited {
  font-size: 20px;
  font-weight: 600;
  background-color: #e67e22;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 9px;
}

h2 {
  font-size: 44px;
  margin-bottom: 48px;
}

section {
  padding: 96px 0;
  background-color: rgb(7, 183, 148);
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet" />
<header>
  <nav class="container">
    <div>LOGO</div>
    <div>NAVIGATION</div>
  </nav>
  <div class="container">
    <h1>A healthy meal delivered to your door, every single day</h1>
    <p>
      The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutricional needs
    </p>
    <a href="#" class="btn">Start eating well</a>
  </div>
</header>
<section>
  <div class="container">
    <h2>Some random heading</h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quas officia illum laudantium, sit sint, assumenda magnam nisi vitae nihil impedit! Ad molestiae sapiente laboriosam corporis impedit. Velit aliquid natus a amet voluptates unde perferendis,
      consequuntur deserunt maiores nihil ipsum.
    </p>
  </div>
</section>

codepen
https://codepen.io/kimo-007/pen/WNymqgr

我的容器（.containers）只占了视区的宽度，当我们移到右边时，我们可以看到子元素（那些我用边距居中的元素：0自动;）都溢出了，这个有固定的宽度，以便居中。但是我真的不明白为什么容器保持在那个宽度，视口的宽度，为什么不一直占据和子元素宽度相同的宽度？所以这个是块元素，在开发工具中也用这个宽度标记完整的主体，所以我没有为这个元素提供任何固定的元素，所以块元素占用了100%的视区宽度？所以你能不能澄清我为什么这个行为，请！！！
我真的很想了解视口上HTML和CSS可视化背后的行为