表題の通り、
1ヘッダーのリストがうまくいきません。リストタグをliの親要素にjustify: content;してますが、反映しません
2 <h1>Coding Practice Everyday!!</h1>　<p>Start from HERE</p>を画像の上に載せたいですが、しません。
3My Challenge のliタグをulタグで囲み、親要素にborder: 1px #707070;
margin: 0 auto;をしましたが反応しません

原因を知りたいです。

やったこと
・復習で本を読みながら学習していますが、解決に至りません。
・3はネットで検索し、親要素にposition：relative; 移動したい要素にposition: absolute; Top0など設定したものの変わりませんでした

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>Coding Practice</title>
8    <meta name="description" content="Coding Practiceです">
9    <link rel="stylesheet" href="CSS/reset-html5.css">
10    <link rel="stylesheet" href="CSS/style.css">
11
12</head>
13<body>
14    <header class="header">
15        <div class="image_word">
16            <img src="image/logo_transparent.png" id="logo" alt="Coding Practice">
17        </div>
18        <div class="header-wrapper">
19            <nav class="header-nav"> 
20                <ul class="header-list">
21                    <li class="list-item"> <a href="#">Top</a></li>
22                    <li class="list-item"><a href="#">My Challenge</a></li>
23                    <li  class="list-item"><a href="#">Just Continue</a></li>
24                </ul>
25            </nav>
26         </div>
27    </header>
28    
29            
30    </div>
31    </header>
32    <main class="main">
33        <div class class="main_title">
34                <div class="image">
35                    <img src="image/austin-distel-wawEfYdpkag-unsplash.png" alt="main_image">
36                </div>
37            
38                <div class="image_text">
39                    <h1>Coding Practice Everyday!!</h1>
40                    <p>Start from HERE</p>
41                </div>
42        </div>
43        <h2 class="text_wrapper">My Challenge</h2>
44
45        <div class="main_content">
46            <div class="main_item_wrapper">
47                <ul class="main_list">
48                    <!--1-->
49                    <li class="list-item">
50                        <img src="image/brooke-cagle-g1Kr4Ozfoac-unsplash (1).png" alt="Challenge1">
51                        <p>もくもく会in大阪のコーディングイベントに参加してきました！！</p>
52                        <p class="date">2020.06.28</p>
53                    </li>
54               
55                    <!--2-->
56                    <li class="list-item">
57                        <img src="image/brooke-cagle-NoRsyXmHGpI-unsplash.png" alt="Challenge2">
58                        <p>模写コーディングを１つ終わらせることができました！！次はもう少し難しいものに挑戦します！</p>
59                        <p>2020.07.02</p>
60                        
61                    </li>
62                    
63                    
64                    
65                    <!--3-->
66                    <li class="list-item">
67                        <img src="image/kevin-hendersen-MQ4eKnHtOUg-unsplash.png" alt="Challenge3">
68                        <p>「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」を完走しました！！</p>
69                        <p>2020.07.10</p>
70            
71                    </li>
72                    
73                </ul>
74                <a class="button" href="index.html">もっと見る</a>
75            </div>
76        </div>
77<!--メインコンテンツ-->
78        <section>
79            <img src="image/tim-bogdanov-4uojMEdcwI8-unsplash.png" alt="">
80            <h2>Just Continue</h2>
81            <p>日々、学び続ける<br>
82                いつか、Webで世界を今より少しだけ<br>
83                よくするために<br>
84                でも、今は自分のために<br>
85                毎日少しずつ勉強する<br>
86                そんな私と共に学んでくれる方を募集しています</p>
87        </section>
88
89    </main>
90    
91
92    <footer>
93        <p class="footer_text">
94            copyright&copy;2020 しょーごログ ALL Rights Reserved.
95        </p>
96
97    </footer>
98    
99</body>
100</html>

SCSS
1.header{
2    max-width: inherit;
3    height: 80px;
4    display: flex;
5    #logo{
6        display: flex;
7        margin: 20px 0;
8        margin-left: 213px;
9        
10    }
11    .header-wrapper{
12        align-content: flex-end;
13        padding-right: 213px;
14        
15        justify-content: space-around;
16        //display: flex;
17        .header-nav{
18        }
19        
20            
21
22        .header-list{
23                display: flex;
24                justify-content: space-between;
25                margin: 31px;
26            
27                .list-item{
28                        color: white;
29                        +.item{
30                            margin-left: 20px;
31                        }
32                        
33            
34
35                    >a{
36                        color: #333333;
37                        justify-content: space-between;
38
39
40                    }
41
42                }
43            
44        }
45    }
46}

SCSS
1.text_wrapper{
2    margin-top: 60px;
3    margin-bottom: 49px;
4}
5
6
7
8.main_content{
9}
10
11
12
13
14.main_item_wrapper{
15        margin-top: 42px;
16        display: flex;
17        margin: 0 auto;
18        
19    .main_list{
20        border: 1px #707070;
21        margin: 0 auto;
22        
23
24        .list-item{
25            
26            p{
27                margin-top: 20px 23px 97px 20px;
28            }  
29            date{
30                text-align: left;
31            } 
32
33        }
34
35    }
36
37}
38
39}

SCSS　Main_image
1.main{
2.main_title{
3        position: relative;
4        .image{
5
6        
7
8    
9    background-position: center;
10    background-size: cover;
11    background-repeat: no-repeat;
12    width: 100%;
13    height: 551px;
14        }
15    
16    }
17    .image_text{
18        
19        h1{
20　　　　　　　position: absolute;
21            top: 0px;
22            right: 0px;
23            bottom: 0px;
24            left: 0px;
25            margin: auto;
26
27
28            
29
30        }
31
32        
33       
34        }
35
36        padding: 254px 452px;
37
38    
39
40    }
41

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

回答2件

ベストアンサー

この質問が参考になると思います。
CSS - ボタンを画像の上に置きたいです｜teratail

コメントを受けて追記

本当に全くもって反応しません！！時間が過ぎていくだけで、いやになりそうです！！

では簡単に説明します！！

1ヘッダーのリストがうまくいきません。リストタグをliの親要素にjustify: content;してますが、反映しません

「うまくいかない」とは具体的にどういうことかわかりませんので、具体的な回答は避けます。

「リストタグをliの親要素にjustify: content;してます」とのことですが、おそらく↓この部分だと思います。

css
1        .header-list{
2                display: flex;
3                justify-content: space-between;

拝見しましたが、justify-contentは効いています。
効いていないように見えるのは、.header-listの幅が小さく余白を取る余裕がないからです。

css
1        .header-list{
2                display: flex;
3                justify-content: space-between;
4                width: 500px;

などとすれば、liが離れて見えるはずです。
（これは問題確認の方法であって、解決方法ではありません）

2 <h1>Coding Practice Everyday!!</h1>　<p>Start from HERE</p>を画像の上に載せたいですが、しません。

.image_textの背景画像にするのが手っ取り早いと思います。

3My Challenge のliタグをulタグで囲み、親要素にborder: 1px #707070;

margin: 0 auto;をしましたが反応しません

border: 1px #707070;は、以下と同値です。

css
1border-color: 1px;
2border-style: none;
3border-width: #707070;

border-style: noneはボーダーを表示しないという意味ですので、これが原因です。

margin: 0 auto;をしましたが反応しません

簡単のために大雑把な説明をすると、widthがautoの時には横幅が一杯に広がるので、余白を取る余裕が残っておらず、水平方向のmarginをautoにしても0と同じです。

投稿2021/05/10 06:59

編集2021/05/11 01:34

Lhankor_Mhy

総合スコア36981

free_teku

2021/05/10 17:43 編集

本当に全くもって反応しません！！時間が過ぎていくだけで、いやになりそうです！！見ていただけることは可能ですか？同じようにしましたが、動きません！！！

Lhankor_Mhy

2021/05/11 00:47

そうなんですね！！わかりました！！あとで追記します！！！

Lhankor_Mhy

2021/05/11 01:46

追記しました。

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

CSSに全角の空白が入っているのでそれを削除。

投稿2021/05/11 03:41

kei344

総合スコア69608

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像の上に文字を入れたいです

コメントを受けて追記

関連した質問