为什么此CSS边距仅适用于左侧？

Question

我正在尝试在ul的空白处创建边距：

.container {
  display: flex;
  width: 100%;
  height: 400px;
}

.content-left {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  align-items: center;
}

.content-left ul {
  padding: 30px;
  margin: 30px;
  border: 1px solid green;
  flex: 1 1 auto;
  height: 200px;
  display: flex;
  list-style-type: none;
}

ul li {
  width: 1000px;
  background-color: grey;
}

.content-right {
  flex: 0 0 300px;
  background-color: red;
}

<div class="container">
  <div class="content-left">
    <ul>
      <li></li>
    </ul>
  </div>
  <div class="content-right"></div>
</div>

但是，如您所见，页边距仅适用于左侧，不适用于右侧。您如何在不添加额外div的情况下将其正确应用到右侧？ ul应该是可滚动的。内容可以比ul

宽