使用+ 1500px屏幕的媒体查询增加容器最大宽度

Question

对于宽度大于1500px的设备，我希望容器的max-width为1440px（此时Bootstrap4默认max-width为1140px）。我在stackoverflow上找到了几个适用于Bootstap 3的答案，但无法让它在BS4中工作，例如使用如下的简单媒体查询：

* {
  border: 1px solid red !important;
}

*/ @media (min-width: 1500px) {
  .container {
    max-width: 1440px !important;
  }
}

<!-- css: bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- css: main -->

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h1>This is a stupid headline<br/>with a short text hello</h1>
    </div>
    <div class="col-md-6">
      <h1 class="text-left">Right Side Test with left align</h1>
    </div>
  </div>
</div>

从红框和开发者控制台可以看出，尽管视口宽度为+ 2000px，但最大宽度仍为1140像素。

我错过了什么？