position: relative;について

position: relative;を用いて、ロゴマークをheaderの左上に、ロゴを上部に移動させたいのですがうまくいきません。
どなたかご享受いただけないでしょうか？
説明が足りないところがありましたら、すぐに対応させていただきます。
よろしくお願い致します。

HTML
1 <header class="page-header wrapper">
2      <h1>
3        <a href="index.html"><img class="logo1" src="image/rogo1.png" alt="un jour glorieux ロゴマーク"></a>
4        <a href="index.html"><img class="logo2" src="image/rogo2.png" alt="un jour glorieux ロゴ"></a>
5      </h1>
6      <nav>
7        <ul class="main-nav">
8          <li><a href="index.html">top</a></li>
9          <li><a href="x">痩身プラン</a></li>
10          <li><a href="#qa">よくある質問</a></li>
11          <li><a href="#comment">お客様の声</a></li>
12          <li><a href="x">お問い合わせ</a></li>
13        </ul>
14      </nav>
15    </header>
16

scss
1@charset "UTF-8";
2
3$color1: #707070;
4$color2: #F3785E;
5
6
7
8html {
9  font-size: 100%;
10  body {
11    font-family: "Helvetica Neue",
12    Arial, 
13    sans-serif;
14    a {
15      text-decoration: none;
16    }
17    img {
18      max-width: 100%;
19    }
20    .logo1 {
21      width: 80px;
22      position: relative;
23      top: 0;
24    }
25    .logo2 {
26      width: 250px;
27      position: relative;
28      top: 0;
29    }
30    .main-nav {
31      display: flex;
32      font-size: 1rem;
33      text-transform: uppercase;
34      margin-top: 34px;
35      list-style: none;
36      li {
37        margin-left: 30px;
38      }
39      a {
40        color: $color1;
41      }
42      a:hover {
43        color: $color2;
44      }
45    } 
46    .page-header {
47      display: flex;
48      justify-content: space-between;
49    }
50    .wrapper {
51      max-width: 1100px;
52      margin: 0 auto;
53      padding: 0 4%;
54    }
55  }
56}
57

css
1@charset "UTF-8";
2
3html {
4  font-size: 100%;
5}
6
7html body {
8  font-family: "Helvetica Neue",
9 Arial, 
10 sans-serif;
11}
12
13html body a {
14  text-decoration: none;
15}
16
17html body img {
18  max-width: 100%;
19}
20
21html body .logo1 {
22  width: 80px;
23  position: relative;
24  top: 0;
25}
26
27html body .logo2 {
28  width: 250px;
29  position: relative;
30  top: 0;
31}
32
33html body .main-nav {
34  display: flex;
35  font-size: 1rem;
36  text-transform: uppercase;
37  margin-top: 34px;
38  list-style: none;
39}
40
41html body .main-nav li {
42  margin-left: 30px;
43}
44
45html body .main-nav a {
46  color: #707070;
47}
48
49html body .main-nav a:hover {
50  color: #F3785E;
51}
52
53html body .page-header {
54  display: flex;
55  justify-content: space-between;
56}
57
58html body .wrapper {
59  max-width: 1100px;
60  margin: 0 auto;
61  padding: 0 4%;
62}
63/*# sourceMappingURL=style.css.map */

行動規範の内容に同意します

回答1件

ベストアンサー

たぶん、やりたいのは

CSS
1html body header {
2  position: relative;
3}
4
5html body header .logo1 {
6  width: 80px;
7  position: absolute;
8  top: 0;
9  left: 0;
10}
11
12html body header .logo2 {
13  width: 250px;
14  position: absolute;
15  top: 0;
16  left: 80px;
17}
18