我想建立一个简单的滚动滑块与灵活框与三个项目。我希望第一个项目是居中的页面（标题下），但以下项目只应该有一个较小的利润。
超文本：

<div class="page-width">
  <h1>Headline</h1>
<div class="container">
  <div class="flex-item">
    <div class="flex-wrapper">
      Center me
    </div>
  </div>
    <div class="flex-item">
    <div class="flex-wrapper">
      Hello World
    </div>
  </div>
    <div class="flex-item">
    <div class="flex-wrapper">
      Hello World
    </div>
  </div>
</div>
</div>

CSS：

.page-width {
  max-width: 500px;
  border: 5px solid green;
}

h1 {
  text-align: center;
}

.container {
  display: flex;
  justify-content: flex-start;
  overflow: scroll;
}

.flex-item {
  margin-left: 20px;
}

.flex-wrapper {
  background: blue;
  width: 250px;
  height: 250px;
}

我怎样才能实现第一个项目居中，而第二个和第三个只保留20px的边距？此外，它应该是响应，例如当页面宽度较小时，第一个项目仍然应该居中。
我试着用

.flex-item {
  flex: 0 0 100%
}

并将 Package 纸居中，这样盒子就会在中心，但随后第二和第三个项目就在屏幕之外了。
代码编号：https://codepen.io/ascena/pen/wvqZgzg