Responsive hero image with button + boxed text problems - html

Question

I am trying to make a full width hero image with an h1 header, boxed text with 2 sizes of text inside plus a button. I have been wrestling with this all day and it just doesnt seem to work the way i'd like it to. Any help would be really appreciated.
thanks
Images:
How it looks at the moment with code
If you notice it is not going full width (gap on the left).
This is how i would like it to look or close enough
//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>
Updated image:
Updated image

Answer 1

.hero-image {
background-image: url("https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
text-align:right;
}
.hero-text h1 {
font-size:40px;
margin-right:15%;
}
.hero-text h1 .italic {
font-style: italic;
}
.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;
max-width: 150px;
margin-top: 25px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
position:relative;
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
margin: 0 0 0 auto;
text-align:left;
}
.herotext2 .no {
font-size: 135px;
line-height: 130px;
font-weight: 600;
}
.herotext2 .tag {
position: absolute;
bottom: 26px;
right: 30px;
font-size: 12px;
color: red;
}
<div class="hero-image">
<div class="hero-text">
<h1>IT support for your<br> business - <span class="italic">as easy as<br>child’s play</span></h1>
<p class="herotext2">All inclusive IT GDPR service packages from <span class="no">£33</span><span class="tag">p/m</span></p>
<button>Try it for free today</button>
</div>
</div>
https://jsfiddle.net/Sampath_Madhuranga/pwxf73z8/16/
I have updated your html format and added new styles..Now it appears as your design but you need to apply relevant font family.
It works nice. Let me know if there is any issue.
Thanks.

Answer 2

You are missing absolute positioning the elements inside the hero image. This way, you can force them to stay at certain point inside it, by setting top, right, bottom and left of each one.
Don't forget to set parent hero div to position: relative.