Css “保持形象”；推；在视口边缘之外

我试图让一个图像（视口的）右边缘稍微远离移动设备，但当我调整浏览器的大小时，图像会“回来”。我如何让它保持在视口之外，并使“某些文本”从图像左边框的下方开始

正文{
背景色：#ff0000！重要；
填充：0px；
边际：0px；
溢出x：隐藏；
字号：800；
}
#顶栏{
颜色：#fff；
字号：21px；
利润率：20px0；
文本对齐：居中；
字号：500；
}
.中心{
字体大小：35px；
文本对齐：居中；
}
.对{
浮动：对；
}
#下文本{
颜色：#fff；
字体大小：68px；
字号：500；
浮动：对；
保证金：220px 0px 120px 0；
}
#主要图片{
宽度：100%；
右边距：自动；
边缘底部：50px；
浮动：对；
}
@仅介质屏幕和（最大宽度：770px）{
#主要信息{
位置：绝对位置；
排名：0；
右：0；
}
#顶栏{
显示：无；
}
#主要图片{
最小高度：391px；
最小宽度：600px；
宽度：100%；
边缘底部：1rem；
位置：相对位置；
右图：-22vw；
}
#下文本{
字号：21px；
宽度：305px；
高度：178px；
}
}

左边
中间
正确的
一些文本

还有几件事

您需要从图像本身中删除

右侧

CSS，以便将文本和图像对齐

为了将图像从屏幕上推出来，您可以做一些像我所介绍的那样的事情，让您正在使用的Bootstrap 3类使用它们的

push

属性来处理图像。您还可以将

transform:translateX（uuuuuuuuupx）

添加到

#下部文本

ID，以将图像和文本移出屏幕

正文{
背景色：#ff0000！重要；
填充：0px；
边际：0px；
溢出x：隐藏；
字号：800；
}
#顶栏{
颜色：#fff；
字号：21px；
利润率：20px0；
文本对齐：居中；
字号：500；
}
.中心{
字体大小：35px；
文本对齐：居中；
}
.对{
浮动：对；
}
#下文本{
颜色：#fff；
字体大小：68px；
字号：500；
浮动：对；
}
#主要图片{
宽度：100%；
右边距：自动；
边缘底部：50px；
浮动：对；
}
@仅介质屏幕和（最大宽度：770px）{
#主要信息{
位置：绝对位置；
排名：0；
右：0；
}
#顶栏{
显示：无；
}
#主要图片{
最小高度：391px；
最小宽度：600px；
宽度：100%；
边缘底部：1rem；
位置：相对位置；
}
#下文本{
字号：21px；
}
}

左边
中间
正确的
一些文本

请在问题本身中包含答案，而不仅仅是在外部网站上。如果没有可以应用的东西，CSS是毫无意义的。您可能可以使用在此处生成可运行的片段。您是否试图将整个图像推到视口之外？如果是这样，你可以把图片上的产权改为-100%，你能澄清一下你的问题吗？我想你需要一个你想做的事的模型。