Html 带有按钮的反应灵敏的英雄形象+；方框文本问题

我正试图使一个全宽度的英雄形象与h1标题，盒装文本与2个大小的文本内加上一个按钮。我一整天都在努力解决这个问题，但它似乎没有按照我希望的方式工作。任何帮助都将不胜感激

谢谢

图像：

如果您注意到它不是全宽的（左侧的间隙）

//css//
.英雄形象{
背景图片：url（“image.jpg”）；
背景位置：100%；
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
填充：50px；
}
.英雄文本{
位置：相对位置；
颜色：#154774；
}
.英雄文本按钮{
边界半径：5px；
填充：10px 20px；
颜色：白色；
背景色：#00adee；
文本对齐：居中；
光标：指针；
字体大小：20px；
字体大小：粗体；
底部：50px；
}
.hero文本按钮：悬停{
背景色：#0597c4；
颜色：白色；
}
.herotext2{
边界半径：5px；
填充：10px 10px 10px 10px；
颜色：白色；
背景色：红色；
字体大小：20px；
宽度：200px；
线高：1.4；
}
//html//
IT支持
您的业务
就像儿童游戏一样简单
包括所有的IT GDPR服务套餐，价格为33英镑/日
今天免费试用

更新图像：

---

您缺少将元素定位在英雄图像中的

absolute

。这样，您可以通过设置每个对象的顶部、右侧、底部和左侧，强制它们停留在其中的某个点上。 别忘了将父英雄div设置为

位置：relative

。英雄形象{
背景图像：url（“https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
填充：50px；
}
.英雄文本{
位置：相对位置；
颜色：#154774；
文本对齐：右对齐；
}
.英雄文本h1{
字体大小：40px；
右边距：15%；
}
.hero文本h1.斜体{
字体：斜体；
}
.英雄文本按钮{
边界半径：5px；
填充：10px 20px；
颜色：白色；
背景色：#00adee；
文本对齐：居中；
光标：指针；
字体大小：20px；
字体大小：粗体；
底部：50px；
最大宽度：150px；
边缘顶部：25px；
}
.hero文本按钮：悬停{
背景色：#0597c4；
颜色：白色；
}
.herotext2{
位置：相对位置；
边界半径：5px；
填充：10px 10px 10px 10px；
颜色：白色；
背景色：红色；
字体大小：20px；
宽度：200px；
线高：1.4；
保证金：0自动；
文本对齐：左对齐；
}
.2.没有{
字号：135px；
线高：130px；
字号：600；
}
.herotext2.tag{
位置：绝对位置；
底部：26px；
右：30px；
字体大小：12px；
颜色：红色；
}

为您的
业务提供IT支持-就像儿童游戏一样简单
包括所有的IT GDPR服务套餐，价格为33便士/米
今天免费试用

非常感谢您的帮助，我想我现在已经很接近了，只是图像扩展了整个宽度，而文本停留在框和按钮的边界内似乎是个问题。我在原始问题中添加了一张照片来显示问题@j4mes83，我看到了提出的问题，但没有看到代码就无法解决这些问题。请给我发送一个JSFIDLE或代码片段链接。然后我可以帮助你。谢谢你的回复，对不起，我不是一个很好的程序员，所以不确定你想让我发送什么，我正在使用wordpress。我可以链接到开发页面吗？否则我可以试着用更多的信息找到你需要的，谢谢again@j4mes83，是的，将我链接到您的开发页面。请将url发送给我。@j4mes83，我找不到你的横幅区域。你把它们放在哪里了？

 //css//    

.hero-image {
background-image: url("image.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 50px;
}

.hero-text {
position: relative;
color: #154774;
}

.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;  
}

.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
 border-radius: 5px;
 padding: 10px 10px 10px 10px;
 color: white;
 background-color: red;
 font-size: 20px;
 width: 200px; 
 line-height: 1.4;
 }
 </style>


 //html//

<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:40px">IT support for<br>your business<br>as easy as<br>child’s play</h1>
<p class="herotext2">All inclusive IT GDPR service packages from £33 p/m</p>
<button>Try it for free today</button>
</div>
</div>