Unable to adjust the responsiveness of words on header - responsive-design

Question

I created a sort of div banner element on the top of my page and had a second transparent element overlayed in an absolute position over it. The problem is that the words in this absolute element will not resize as the page size decreases, in other words, they are not very responsive. How can I fix this?
CSS
.full{
min-height: 100%;
background-color: white;
/*background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 90%), url("america/cservice.jpeg");*/
/*background-blend-mode: lighten;*/
padding-top:25px ;
color: #5a5a5a;
/*color: black;*/
padding-bottom: 20px;
text-align: center;
align-items: center;
border-top: 5px solid rgba(0, 0, 102, 0.5);
border-bottom: 5px solid rgba(0, 0, 102, 0.5);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.image{
width: 100%;
height: 280px;
background-image: url(america/news2.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin: 0 auto;
}
.bor {
position: absolute;
border: 5px solid;
border-color: rgba(255, 255, 255, 0.5);
padding-top:15px;
padding-bottom:;
background-color: rgba(133, 133, 173, 0.4);
left: 0;
right: 0;
bottom: 20;
top: 20;
padding-left: 20px;
padding-right: 20px ;
margin-right: 250px;
margin-left: 250px;
}
h2 {
position: absolute;
width: 100%;
color: black;
font-size: 40px;
padding-top:15px;
font-weight: 900;
}
h4 {
position: relative;
width: 100%;
color: black;
font-size: 30px;
font-weight: 900;
padding-top: 95px;
padding-bottom: 25px;
font-stretch: ultra-expanded;
}
b{
border: 5px solid black;
padding-right: 25px;
padding-left: 25px;
margin-left: 20px;
margin-right: 20px;
color: white;
font-weight: 900;
font-size: 40px;
}
HTML
<div class="full">
<div id="section">
<h1 class="text-center">—News Feed—</h1>
<br>
<hr>
<div class="image">
<div class="bor">
<h2>Weekly<b>Report</b></h2>
<br>
<h4>—Catch up on all the latest news regarding the world—</h4>
</div>
</div>
</div>
</div>

Answer 1

Is this closer to what you are looking for?
https://codepen.io/panchroma/pen/WEygZE
The key change I made was this:
h2 {
/* position: absolute; */ /* new */
position:relative; /* new */
}
Search the css for 'new' to see other less important edits.
This still needs work but hopefully it will get you unstuck.
Good luck!