slogan and background image attach responsively - html

Question

I am trying to design such header where the slogan and background image are attached in the stated picture. I want to use flex to make it work but it is not working. Giving width breaks the responsiveness. I have created a jsbin to show the demo and here it is
http://jsbin.com/muguwavosa/edit?html,css,output
The source code
.header {
display: flex;
flex-direction: column;
background-image: url('https://www.rj-investments.co.uk/wp-content/uploads/2018/02/Home-Featured.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
padding: 100px 0;
}
.slogan-wrapper {
background: #fff;
padding: 80px 0 0 40px;
margin-top: 70px;
}
.slogan-text > h1 {
font-size: 3.375rem;
font-weight: 900;
letter-spacing: 5px;
color: #373f48;
}
.slogan-text {
padding: 100px 70px 100px 0;
position: relative;
background: #fff;
z-index: 1;
}
<div class="header">
<div class="slogan-wrapper grid">
<div class="slogan">
<div class="slogan-text">
<h1>Hustle, Loyalty, Respect</h1>
</div>
</div>
</div>
This is what I wanted exactly and its a full width header

Answer 1

Did you notice that the class 'span' div is closed with a p tag? If you wanted to put the width there then that would be the problem.

Answer 2

Change the below code in CSS file and try once.
.header {
display: flex;
flex-direction: column;
background-image: url('https://www.rj-investments.co.uk/wp-content/uploads/2018/02/Home-Featured.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
padding: 100px 0;
}
.slogan-wrapper {
margin-top: 70px;
}
.slogan-text > h1 {
font-size: 3.375rem;
font-weight: 900;
letter-spacing: 5px;
color: #373f48;
background-color: #fff;
padding: 80px 40px;
width: auto;
max-width: 319px;
}
.slogan-text {
padding: 100px 30px 100px 0;
position: relative;
z-index: 1;
}