画像の位置配置がうまくできません

現在、住友商事のHPを模写コーディングしています。
headerの部分が完成して、次にmainタグでメインのところを模写するときに写真の位置がおかしくなり解決方法がわからず質問させて頂きました。
mainタグに切り替えずheaderタグのままだと綺麗に配置はされます。

header部分が完成した図↓

mainに切り替えて画像を貼った図↓

headerタグの中に画像を入れた場合の図（この状態にしたい）

画面ほぼ全部に埋もれてしまいます。
コードはこちらになります。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="style.css">
7  <title>住友商事</title>
8</head>
9<body>
10  <!-- ヘッダ -->
11  <header class="t-header">
12      <div class="mti-col-md-12">
13        <div class="globalHeder">
14          <div class="companyLogo">
15            <h1>
16              <img src="img/logo.svg" alt="住友商事">
17            </h1>
18              <span class="japan">日本</span>
19          </div>
20          <div class="Navigation">
21              <div class="switch">
22                <div class="switch">
23                  <ul>
24                    <li class="weight">日本語</li>
25                    <li class="border">English</li>
26                  </ul>
27                </div>
28              </div>
29              <div class="wrap">
30                  <div class="selectRegin">
31                    <img src="img/icons/icon-region.png" alt="Regin">
32                    <span class="select">Select Region</span>
33                  </div>
34                  <div class="searchButton">
35                    <span class="search">
36                      <img src="img/icons/icon-search.png" alt="サイト検索">
37                    </span>
38                  </div>
39              </div>
40          </div>
41        </div>
42      </div>
43      <!-- ヘッダーメニュー -->
44      <div class="list">
45        <ul>
46          <li class="ColumnNone">企業情報<span class="arrow"></span></li>
47          <li class="Column">事業紹介<span class="arrow"></span></li>
48          <li class="Column">ニュース<span class="arrow"></span></li>
49          <li class="Column">サステナビリティ<span class="arrow"></span></li>
50          <li class="Column">投資家情報<span class="arrow"></span></li>
51          <li class="Column">採用情報<span class="arrow"></span></li>
52          <li class="Column">次の100年へ<span class="arrow"></span></li>
53        </ul>
54      </div>
55  </header>
56  <!-- メイン写真 -->
57  <main class="mti-main">
58    <article class="mti-article">
59      <img class="photo1" src="img/heroVisual.jpg" alt="メイン写真">
60      <p class="photo1letter">Enriching lives and the world</p>
61    </article>
62  </main>
63</body>
64</html>

css
1.t-header {
2  border-top: 4px solid #b5dedb;
3  top: 0;
4  left: 0;
5  width: 100%;
6  position: fixed;
7}
8
9.globalHeder {
10  display: flex;
11  align-items: flex-start;
12  margin-right: 35px;
13  justify-content: space-between;
14}
15
16.companyLogo {
17  display: flex;
18  align-items: center;
19  margin-left: 20px;
20}
21
22img {
23  max-width: 100%;
24  width: auto;
25  box-sizing: border-box;
26  vertical-align: top;
27}
28
29.japan {
30  margin-left: 20px;
31}
32
33.Navigation {
34  padding: 0 7px;
35  display: flex;
36  align-items: center;
37}
38
39.switch {
40  margin: 10px 0 10px 24px;
41}
42
43ul {
44  display: flex;
45  align-items: center;
46 
47}
48
49li {
50  list-style: none;
51}
52
53.border {
54  border-left: 1px solid #e5e5e5;
55  margin-left: 15px;
56  padding-left: 15px;
57  opacity: 0.5;
58}
59
60.weight {
61  font-weight: bold;
62}
63
64.select {
65  margin-left: 5px;
66  font-weight: bold;
67}
68
69.wrap {
70  display: flex;
71  margin: 10px 0 10px 24px;
72  border-left: 1px solid #e5e5e5;
73  margin-left: 24px;
74  padding-left: 24px;
75}
76
77.searchButton {
78  border-left: 1px solid #e5e5e5;
79  margin-left: 24px;
80  padding-left: 24px;
81}
82
83.list {
84  background-color: #fff;
85  border-top: 1px solid #e5e5e5;
86  border-bottom: 1px solid #e5e5e5;
87  position: relative;
88  width: 100%;
89}
90
91.ColumnNone {
92  font-weight: bold;
93  display: flex;
94  align-items: center;
95  justify-content: center;
96  flex: 1;
97  padding: 15px 24px;
98}
99
100.Column {
101  border-left: 1px solid #e5e5e5;
102  margin-left: 24px;
103  padding: 15px 24px;
104  font-weight: bold;
105  display: flex;
106  align-items: center;
107  justify-content: center;
108  flex: 1;
109}
110
111.arrow{
112  margin-left: 10px;
113  width: 5px;
114  height: 5px;
115  border: 1px solid;
116  border-color:  transparent transparent black black;
117  transform: rotate(-45deg);
118}
119
120.mti-main {
121  position: relative;
122}
123
124.mti-article {
125  position: relative;
126}
127
128.photo1 {
129  width: 100%;
130  height: 1080px;
131}
132
133.photo1letter {
134  color: #fff;
135  font-size: 2em;
136}