How to fix the offset?

Good day!
Laid out page. The cap is behaving strangely. Can't understand why. When the width of the working area is small, there is a situation, as in the screenshot.
On a PC:
5c99b6fa52f63634611802.jpeg
On your phone:
5c99b723b7f02900188799.jpeg
<div class="header__banner">
 <div class="banner-wrapper">
 <div class="banner__title-text">
 <h2>Association of restoration<br>and the Renaissance of the<br>architectural heritage</h2>
 the <h1>&#10077;Architectural heritage&#10078;</h1>
 <div class="banner__number-text">
<p>SRO<p>
</div>
</div>
 <a onclick="#">
 <div class="banner__invite">
 <p>Introduction<br>Association<br>&#8595;</p>
</div>
 </a> 
</div>
 </div>

.header__banner {
 display: flex;
 justify-content: center;
 margin-top: 5px;
}
.banner-wrapper {
 display: flex;
 align-items: center;
 height: 586px;
 width: 1500px;
 background-image: url("../img/header_img.png");
}
.banner__title-text {
 position: relative;
 bottom: 50px;
 width: 641px;
 height: 211px;
 background-color: #c86354;
 margin-left: 255px;
}
.banner__title-text h2 {
 color: #ffffff;
 font-family: 'Proxima Nova Th1', sans-serif;
 font-style: italic;
 font-weight: bold;
 font-size: 18px;
 text-transform: uppercase;
 margin-left: 20px;
 line-height: 25px;
}
.banner__title-text h1 {
 font-family: 'Proxima Nova Th2', sans-serif;
 font-weight: bold;
 position: relative;
 bottom: 10px;
 font-size: 40px;
 text-transform: uppercase;
 margin-left: 17px;
 color: #ffffff;
}
.banner__number-text {
 position: relative;
 bottom: 27px;
 float: right;
 width: 230px;
 height: 40px;
 background-color: #c14e3d;
}
.banner__number-text p {
 font-family: 'Arsenal', sans-serif;
 text-align: center;
 line-height: 4px;
 color: #ffffff;
 font-weight: bold;
 font-size: 20px;
}
.banner__invite {
 position: relative;
 bottom: 50px;
 width: 211px;
 height: 211px;
 background-color: #b62f1b;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 font-size: 20px;
 font-family: 'Proxima Nova Th', sans-serif;
 text-transform: uppercase;
 font-weight: bold;
 color: #ffffff;
 cursor: pointer;
 transition-duration: 0.7 s
}
.banner__invite:hover {
 background-color: #dd2f15;
}
March 19th 20 at 08:35
3 answers
March 19th 20 at 08:37
Solution
To remove a fixed width and set white-space: nowrap; that is not tolerated words.
March 19th 20 at 08:39
You have blocks fixed value (height and width), use % for length and padding or min-height
March 19th 20 at 08:41
yeah, right wrote, You have asked a hard width to the elements you want in a smaller area they have got. You can leave hard, but to do Adaptive, at a certain point when a small width of the screen, reduce the width of the blocks (their sizes) via media queries

Find more questions by tags FlexboxLayoutHTMLCSS