What can I improve to make a responsive design - html

Question

When resizing the <p > tag breaks out of its parent <div>, how can I
make it responsive and stay in the <div> HTML code. That's what I
want to achieved with HTML and CSS: I tried to wrap everything in a div so I can control elements using absolute elements so I can center it in the middle.
Thank you in advance for your advices to help me make nicely written websites in the future.
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
html,body {
height: 100%;
}
body {
margin: 0;
background-color: #eee;
}
header {
height: 100vh;
background-size: cover;
position: relative;
height: 100%;
background-image: url("/images/background.jpeg")
}
.text {
position: relative;
width: 100%;
height: 100%;
}
.text1 {
font-size: 35vh;
position:absolute;
top: 5%;
left: 5%;
color: #fff;
font-weight: bold;
margin: 0;
height: auto;
}
.text2 {
margin: 0;
font-size: 35vh;
position:absolute;
left:33%;
top: 40%;
font-size: 5vh;
text-transform: uppercase;
}
.text3 {
position:absolute;
left: 15%;
top: 50%;
width: 50vh;
height: auto;
margin: 0;
font-weight: 4vh;
font-weight: bold;
font-style: italic;
font-family: 'Didact Gothic', sans-serif;
color: #fff;
}
.text4 {
position:absolute;
left: 15%;
top: 65%;
margin: 0;
width: 50vh;
font-weight: bold;
font-style: italic;
color: #fff;
font-family: 'Didact Gothic', sans-serif;
}
<header id="showcase">
<div class="text">
<h1 class="text1">-20%</h1>
<h1 class="text2">Rabbat</h1>
<p class="text3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
<p class="text4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
</div>
</header>

Answer 1

Use this in your head tag, and try not to use absolute positions for inner controls
<style>
p{
work-break: break-all;
}
</style>