删除Bootstrap Top Margin

Question

我的Bootstrap布局中有以下内容，

<div class="row mt-4" id="content">
    <div class="col owl-carousel">
        <div class="slide text-center">
            <div class="innerslide">
                <h1>Registered In Total So Far</h1>
                    <p class="split-para align-middle">Total: <span id="total-registered"></span></p>
                    <p class="split-para align-middle">Durban: <span id="durban-registered"></span></p>
                    <p class="split-para align-middle">Pietermaritzburg: <span id="pmb-registered"></span></p>
            </div>
        </div>
        <div class="slide text-center">
            <div class="innerslide">
                <h1>Registered In Last Hour</h1>
                <p class="split-para">Total: <span>409</span></p>
                <p class="split-para">Durban: <span>345</span></p>
                <p class="split-para">Pietermaritzburg: <span>74</span></p>
            </div>
        </div>
    </div>
</div>

我想要实现的是在屏幕介于某个宽度之间时将mt-4 margin-top行设置为0。我遇到的问题是，在特定大小的平板电脑或手机上以横向模式查看页面时，它会将内容推向远处，因为我使用固定底层类作为页脚行。

如果屏幕处于纵向模式并且处于该宽度，我想要删除该边距。使用Responsinator，如果我理解正确的话。当景观宽度介于667px和736px之间时会发生这种情况。

这基本上就是我想要实现的目标：

我尝试使用以下代码，但似乎没有什么区别：

@media (min-width: 650px) and (max-width: 768px) {
    #content {
        margin-top: 0;
    }
}

我希望这是有道理的，如果需要，我很乐意提供进一步的信息。

谢谢。

编辑：解决方案只是在这里发布正确的代码，以防它帮助其他人。谢谢你的帮助！

@media screen and (orientation: landscape) {
  #content {
    margin-top: 0 !important;
  }
}