HTML元素在屏幕大小上的位置不正确

我制作了一个带有侧边栏和内容区的基本HTMl页面。我的问题是我的内容区域在屏幕大小上没有正确定位。具体来说，我的边栏和页面内容之间的距离在小屏幕上比在大屏幕上小。尽管我的侧边栏的宽度是

150px

，并且我将

页面内容的
左边距
属性也设置为
150px

以下是较小屏幕的屏幕截图：


以下是大屏幕的屏幕截图：


以下是小提琴的链接：


如何编辑css，使大小屏幕之间的间距保持一致

提前谢谢
 我认为你应该按屏幕的百分比来代替像素，比如25%，75%，这在所有媒体大小上看起来都是一样的。
你使用的是引导
容器
类。尝试改用
容器液体

<div class="container-fluid">


这是由于此（引导）CSS规则在768px以上激活：

.container {
    max-width: 750px;
}

只需使用不同的类名、覆盖此设置的附加类或覆盖此设置的附加规则。
看起来像素更小，因此150px变成了一个小毫米数。