Bootstrapでcontainerをいくつかのメディアクエリで同じ幅に固定したい

Question

前提・実現したいこと

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8">
      左側コンテンツ
    </div>

    <div class="col-sm-12 col-md-4">
      右側コンテンツ
    </div>
  </div>
</div>

Bootstrap4でこのようなhtmlを用意しました。
スマホサイズでは左側コンテンツの下に右側コンテンツが回り込み、これは想定する挙動です。

問題はそれ以上のサイズのケースです。
1200px以上の画面幅だとcontainerは1140pxに固定されますが、"スマホサイズ以上の全てのメディアクエリ"でも同じく1140pxに固定させたいのですが上手くいきません。

Bootstrapでは各メディアクエリ毎にmax-widthが指定されていますがこれを1140pxに書き換えてもそれ以下のwidthで表示されてしまいます。

かといってwidthを直接指定しても同様です。
メディアクエリ未指定のcontainerクラスはwidth:100%が指定されているのでより上位の要素の影響下にあるかと思ったのですがどれもwidthを明示的に設定してはいませんでした。

スマホサイズの事もあるのでなるべくBootstrapのスタイルに則った上でこの部分だけ書き換えたいと考えているのですが、何か良い方法はありませんでしょうか。

Comments

[tabuu]

>"スマホサイズ以上の全てのメディアクエリ"でも同じく1140pxに固定させたい
例えばディスプレイの解像度が1000pxの場合は、
横スクロールバーを表示してでも1140pxに固定したいということでしょうか？

[toppunobice0]

はい、ご認識の通りです。
PCレベルの画面幅であれば1140px固定、それ以下はレスポンシブにしたいです。

[Lhankor_Mhy]

当方では1140pxに固定できました。

↓サンプル
https://jsfiddle.net/Lhankor_Mhy/zumwbyn1/

どのようなCSSで問題が起きているのか、ご提示された方が回答が付きやすいと思います。

[toppunobice0]

サンプルありがとうございます！
確かに頂いたものは固定で表示出来ていますね。確実に私の他のcss部分が悪影響を与えていることがわかりましたのでそちらの問題を探してみます。
ありがとうございました！