Css 多元件响应式尺寸调整

我试图让代码中的多个元素对视口高度和宽度的更改做出响应。当我的屏幕设置为尺寸1412x150时，每个元素都非常适合，但是如果改变尺寸，就会出现问题。我的签到部分的图形和方框猛扑到左边，考虑到背景图像是60-40的分割，看起来并不吸引人

我只是想知道css中是否有任何代码允许我根据1412x150的外观设置这些维度，而不管屏幕如何变化

我目前将它们放在具有以下样式代码的容器中：

.container {
            z-index:1001;
            float:right;
            position:sticky;
            padding-top:8%;
            padding-left:45%;
            padding-right:10vh;
            object-fit:cover;
            object-position:right;
    
        }
    
        .container-2 {
            z-index:1001;
            float:right;
            position:sticky;
            padding-top:7%;
            padding-left:45%;
            padding-right:11%;
            object-fit:cover;
            object-position:right;
        }
    
    .label {
        font-size:30px;
        font-weight: bold;
        color:white;
    }
    
        .split {
          position: absolute;
          width: 50%;
          height: 100%;
          overflow: hidden;
        }

谢谢