widthの指定が分かりません。拡大縮小しても崩れないようなレイアウトを実装したい。

キャプチャのデザインを実装しようとしています。

縮小した時でもトップ画像が右寄りに配置した状態で動かず、
かつ、左に縦書きで文字を入れるにはどこにwidthを指定したら良いのでしょうか。
色々と試したものの、トップ画像のサイズが変わってしまいます。
ご存じの方がいらっしゃいましたらご教示いただけますと嬉しいです。

html
1
2<body>
3  <header>
4    <div class="container1">
5      <div class="area_logo_header">
6         <a href="#">
7         <img class="logo" src="img/logo.png" alt="TOUMAI"></a>
8      </div>
9       <nav class="nav_header">
10         <ul class="list_nav_header">
11          <li><a href="#">CONCEPT</a></li>
12          <li><a href="#">SERVICE</a></li>
13          <li><a href="#">NEWS＆COLUMN</a></li>
14          <li><a href="#">F＆Q</a></li>
15          <li><a href="#">CONTACT</a></li>
16        </ul>
17      </nav>
18     <nav class="nav_header2">
19         <ul class="sns_icon_header">
20          <li class="sns_icon"><a href="#">
21             <img class="Instagram" src="img/Instagram_icon.png" alt="Instagram"></a></li>
22          <li class="sns_icon"><a href="#">
23             <img class="Twitter" src="img/Twitter_icon.png" alt="Twitter"></a></li>
24          <li class="sns_icon"><a href="#">
25             <img class="facebook" src="img/facebook_icon.png" alt="facebook"></a></li>
26         </ul>    
27     </nav>   
28    </div><!--/.container1-->
29  </header>
30  <main>
31    <class class="container2">
32     <div class="area_top_view_inner">
33        <P class="txt">
34         他の誰かに作られた
35         <br>「在り方」「やり方」を抜け出そう
36        </P> 
37     </div>
38    
39      <div class="area_top_view">  
40        <p class="ttl">自分らしく、<br>生きるために</p>
41      </div><!--/.area_top_view-->
42    </div><!--/.container2--> 
43
44  </main>
45    
46</body>
47</html>

css
1body{
2    font-family: 'Noto Sans JP', sans-serif;
3}
4
5a {
6    color: #000;
7    text-decoration: none;   
8    
9}
10.container1{
11    max-width: 1625px;
12    margin: 0 auto;
13    padding: 0 40px;
14}
15/* ヘッダー */
16header{
17    width: 100%;
18    position: absolute;
19    top: 0;
20    left: 0px;
21}
22header > .container1{
23    height: 100px;
24    display: flex;
25    align-items: center;
26    max-width: none;
27}
28/* 会社ロゴ */
29.area_logo_header .logo{
30    width: 270px;
31    display: block;   
32    align-items: left;
33}
34.area_logo_header img{
35    height: 55px;
36    vertical-align: bottom; /*画像下の余白を無くす*/
37    
38}
39/* ヘッダーナビ */
40.nav_header{
41    margin: 0 0 0 auto;
42}
43.list_nav_header{
44    display: flex;
45    align-items: center; 
46    margin: 0 -15px;
47}
48.list_nav_header > li{
49    padding: 0  30px;
50}
51/* SNSアイコン ヘッダー */
52.sns_icon_header{
53    display: flex;
54    align-items: right; 
55    margin: 30px; 
56}
57.sns_icon_header > ul{
58    list-style: none;  
59}
60.sns_icon_header > li{
61    padding: 0 5px;
62}
63
64/* トップ画像 */
65.container2{
66    max-width: 100%;
67    display: flex;
68}
69.area_top_view_inner{
70    width: 185px;
71}
72.area_top_view{
73    width: 100%;
74    background: url(../img/KV.jpg) no-repeat center center;
75    background-position: left;
76    background-size: cover;
77    height: 735px;  
78    margin-left:300px;
79}
80
81.area_top_view .ttl{ 
82    color: white;
83    font-family: "游明朝";
84    font-weight: 700;
85    font-size: 120px;
86    margin: 450px 60px;  
87}
88

maisumakun

2020/12/18 03:21

「拡大縮小」とは、「ブラウザの拡大率を変える」ことですか？それとも、「ブラウザの幅を変える」という意味でしょうか？

rampram0924

2020/12/18 03:54

maisumakun 様ご回答いただきまして、有難うございます。ブラウザの拡大率を変えても、画像が右に寄った配置で動かないようにしたいと思っています。かつ、左に縦書きの文言を入れて同様に拡大縮小しても動かないようにしたいと思っています。知識に乏しく、適切な表現でないかもしれません。申し訳ありません。