ヘッダーの位置調整に苦戦しています。

sassの学習がてらコーディングをしています。
しかし、ヘッダーとロゴの位置の調整ができません。なぜでたらめな位置になってしまうのでしょうか？

こちらでは位置を指定しているのにロゴもしたすぎます。
原因が知りたいです。何卒よろしくお願いいたします。

・やったこと
flexの使い方などを改めて「本」を読みました
完成図↓

現状↓

追記です
padding-top：0px;
コメントアウトを試みましたが、全く動きませんでした。泣

Logoのposition: absoluteもコメントアウトしましたが何の変化も起きません！！

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>しょーごの入門編</title>
8    <link rel="stylesheet" href="css/reset-html5.css">
9    <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12    <header class="header">
13        <div class="inner">
14            <nav class="header_wrapper">
15                <ul class="header-list">
16                    <li class="list-item">Home</li>
17                    <li class="list-item">About</li>
18                    <li class="list-item">Contact</li>
19                </ul>
20            </nav>
21        </div>
22        <div class="header_logo">
23            LOGO
24        </div>
25        <div class="image">
26            <img src="image/fv.png" alt="Feature">
27        </div>
28    </header>
29    <main class="main">
30        <h1 class="main_title">Feature</h1>
31        <div class="main_info">
32            <div class="text">
33                <h2 class="title">What is “Coding Basics”?</h2>
34                <p>
35                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>
36                    sed do eiusmod tempor incididunt ut labore et dolore <br> magna 
37                    aliqua. Ut enim ad minim veniam, quis nostrud <br> 
38                    exercitation ullamco laboris nisi ut aliquip ex ea. commodo consequat. 
39                    Duis aute irure dolor in reprehenderit in voluptate velit 
40                    esse cillum dolore eu.
41                </p>
42            </div>
43          
44
45
46        </div>
47    </main>
48
49    <footer class="footer">
50        <div class="footer_logo">LOGO
51
52        </div>
53        <div class="footer_text">
54            <p>
55                &copy; 2020 LOGO All rights reserved.
56            </p>
57        </div>
58
59    </footer>
60    
61</body>
62</html>

CSS
1body {
2  background-color: #fff;
3  font-size: 16px;
4  font-family: Arial, Helvetica, sans-serif;
5  width: 100%;
6  height: auto;
7  max-width: 1366px;
8}
9
10.header {
11  background-color: #EFA358;
12  width: 1366px;
13  height: 80px;
14}
15
16.header .inner {
17  text-align: center;
18}
19
20.header .inner .header_wrapper .header-list {
21  display: -webkit-box;
22  display: -webkit-flex;
23  display: -ms-flexbox;
24  display: flex;
25  -webkit-box-pack: end;
26  -webkit-justify-content: flex-end;
27      -ms-flex-pack: end;
28          justify-content: flex-end;
29  text-align: center;
30}
31
32.header .inner .header_wrapper .header-list .list-item {
33  color: #FFFFFF;
34}
35
36.header .header_logo {
37  color: #FFFFFF;
38  font-size: 28px;
39  font-family: Arial Bold;
40  padding-top: 26px;
41  padding-left: 207px;
42}
43
44.footer {
45  color: #fff;
46  height: 100px;
47  background-color: #EFA358;
48}
49
50.footer .footer_logo {
51  font-family: Arial,Bold;
52  font-size: 24px;
53  margin: 19px 647px 648px 20px;
54  text-align: center;
55}
56/*# sourceMappingURL=style.css.map */

itagagaki

2021/05/09 17:02

レイアウトを結局どのようにしたいのかがわからないので回答しようがないのですが、とりあえずheader_logoが下過ぎるのは padding-top: 26px; のせいでは？

free_teku

2021/05/09 17:14

>--header_logoが下過ぎるのは padding-top: 26px; のせいでは？コメントアウトしたのですが、反応がありません。これはPCに問題があるのでしょうか？表題に完成物を貼ります。ご回答いただけると幸いです。

miyabi_pudding

2021/05/10 00:50

.header_logoに対して、 line-height: 1.005emなどを効かせたらどうなるでしょうか？文字列には、行間という隙間が必ず着きますので、paddingやmarginだけでは調整しきれない場合があります。ので、文字列の場合は、行間の調整が必要になります。

Lhankor_Mhy

2021/05/10 01:01

現状のリンクですが、127.0.0.1 は localhost なので、他人はアクセスできないです。

free_teku

2021/05/10 01:26

修正いたしましたが、何ら変化は感じませんでした！泣

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

回答2件

ベストアンサー

完成図の画像をみると、LOGO(.header_logo)とナビゲーション(nav.header_wrapper)が横並び、その下にメイン画像(.image)というレイアウトにしたいということでしょうか。

ならば、margin, padding等でちまちま位置調整せずに、FlexBoxでレイアウトを決めるのがシンプルでしょう。

下記のような感じで画像に近いレイアウトになります。

css
1body {
2  background-color: #fff;
3  font-size: 16px;
4  font-family: Arial, Helvetica, sans-serif;
5  width: 100%;
6  height: auto;
7  max-width: 1366px;
8  margin: 0 auto
9}
10
11.header {
12  background-color: #EFA358;
13  width: 100%;
14  display: flex;
15  flex-wrap: wrap;
16  justify-content: space-around;
17  align-items: center;
18}
19.header .inner .header_wrapper .header-list {
20  display: flex;
21  list-style: none;
22  gap: 20px;
23}
24.header .inner .header_wrapper .header-list .list-item {
25  color: #FFFFFF;
26}
27.header .header_logo {
28  color: #FFFFFF;
29  font-size: 28px;
30  font-family: Arial Bold;
31  order: -1;
32}
33.header .image {
34  width: 100%;  
35}
36.header .image img{
37  width: 100%;  
38}