css　backgroundでの画像を相対パスで表示したいです

この方の動画を見て模写コーディングをしていました。リンク内容
同じように進めてたんですが、backgroundで画像が表示されません
いろんな画像を試したんですが、全部表示されませんでした
コード

```ここに言語を入力<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <meta charset="UTF-8">
    <title></title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

</head>
<body>
    <header>
        <div class="container">
            <div class="header-left">
                <h1><a href="#">write</a></h1>
                <p>書くためのテーマ</p>
            </div>
            <div class="header-right">
                <div class="header-nav">
                    <ul class="gnav">
                        <li><a href="#">ホーム<i class="fas fa-angle-down"></i></a>
                            <ul>
                                <li><a href="/">→カスタマイズ</a></li>
                            </ul>                 
                        </li>
                        <li><a href="#">ページ<i class="fas fa-angle-down"></i></a>
                            <ul>
                                <li><a href="/">アイキャッチ画像無しのページ</a></li>
                                <li><a href="/">(ページ全幅テンプレート)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">タイポグラフィー</a></li>
                        <li><a href="#">お問い合わせ</a></li>
                    </ul>
                </div>
                <div class="search-wrapper">
                    <form action="">
                      <input class="search" name="q" type="text" placeholder="検索...">
                    </form>
                </div>

            </div>
        </div>

        
    </header>
</body>
</html>
コード

   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
    font-size: 15px;
    font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
    line-height: 1.8;
}
a{
    text-decoration: none;
    color: #444444;
}

header{
    height: 152px;
    margin-top: 50p;
    
}

.container{
    width: 1040px;
    margin: 0 auto;
     
}

ul{
    list-style: none;
}

.header-left{
    float: left;
}

.gnav li{
    float: left;
    font-size: 16.88px;
    padding: 0 17px;
    position: relative;
}
.gnav li li{
    width: 200px;
    border: solid 1px  #f0f0f0;
    padding: 10px 20px 0px 30px;
    box-shadow: 0.5px 0.5px #f0f0f0;
    background-color: white;
    opacity: 0;
}
.gnav li ul{
    position: absolute;
    top: 45px;
    left: -5px;
    height: 0;
    visibility: hidden;
}

.gnav li:hover ul li{
visibility: visible;
opacity: 1;
transition: all 0.3s;
}
 
.gnav li a:hover{
    color: #c49029;
}
.gnav li a{
display: block;
padding-bottom: 14px;
}


.header-left h1{
    font-size: 36px;
    line-height:  46px;    
}

.header-left p{
    font-size: 18px;
}

.header-right li{
    font-size: 1em;
    padding: 0 15px;
}

.header-right{
    padding-top: 45px;
    float: right;
}

.fas{
    margin-left: 10px;
}

.gnav{
    padding: 0 200px 0 0;
}

.search-wrapper{
    height: 40px;
    
    display: inline-block;
}

.search{
    height: 40px;
    width: 180px;
    background: url(NicePng_magnifying-glass-png_55201.png) left center no-repeat;
    background-size: 24px 24px;
    
}
コード

cx20

2021/11/03 14:13

> background: url(NicePng_magnifying-glass-png_55201.png) left center no-repeat; 虫眼鏡のアイコンが表示されない、ということでしょうか？（ローカルで試したところ、特段ソース上は問題無さそうでした。）以下を確認してみて下さい。・stylesheet.css ファイルと同じ場所に画像ファイルが置かれているか？・画像ファイルが画像表示ソフトで開けるか？・ブラウザのコンソールにエラーが出ていないか？

nomanjob

2021/11/04 12:54

はい、虫眼鏡の画像が表示されません。ブラウザのコンソールにエラーが出てました。 stylesheet.css :1の表示は、stylesheet.css の一行目が原因とネットで調べて出てきて、リセットcssを変えてみたんですけどダメでした。他の原因とか教えてくださると助かります。

cx20

2021/11/04 13:06

ファイル名が見つからないと出ているので、ファイル名が違っているか存在していないのだと思います。ブラウザの「Console」タブではなく「Network」の方はどうでしょうか？

nomanjob

2021/11/05 11:56

このようになっています。

cx20

2021/11/05 14:06

やはりファイル名が見つからないというエラーのようですね。ちなみにOSは何でしょうか？MacやLinuxだと大文字・小文字の間違いで表示されないケースがあるかもしれません。あとは、拡張子が非表示になっているのに気が付かず「172546_search_icon.png.png」というようなファイル名にしてしまっているとか？

nomanjob

2021/11/10 11:50

すいません、返信遅くなりました。 OSはMacです。拡張子は非表示ではなかったです。ファイル名も間違ってはなかったです。。

cx20

2021/11/10 14:53

Mac環境で試してみました。stylesheet.cssと同じフォルダに画像ファイルが存在していれば特段問題なく表示されるようでした。念のためですが、ターミナルからファイルが存在するか今一度確認してもらえますか？＜コマンド＞ cd ~/Desktop/html_lesson/ ls -la → 表示された内容を教えて下さい。

nomanjob

2021/11/11 12:23

画像を追加しました。

cx20

2021/11/11 12:30

画像の追加ありがとうございます。ターミナルの表示結果としては ~/Desktop/html_lesson/ の下に「172546_search_icon.png」がいないようですね。。