WEBサイトでヘッダー写真やTwitterロゴを表示させたい

実現したいこと

WEBサイトでTwitterのロゴやヘッダーの写真を表示させたい

前提

現在、簡単なWEBサイトを作っています。
その中で、ヘッダー画像やTwitterのロゴ付きリンクを表示させたいのですが、うまく行きません。
コードが間違っているのか、容量不足なのかを調べても原因がわからず、こちらで質問させていただきます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3   <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta name="description"content="LP"/>
7    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
8    <link rel="stylesheet" href="website.css">
9    <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
10    <title>LP</title>
11  </head>
12  <body>
13   <!-- Header -->
14   <header id="header">
15     <h1 class="site-title">
16       <a href="#"> Akisite </a>
17     </h1>
18     <nav>
19       <ul>
20         <li><a href="#About">About</a></li>
21         <li><a href="#works">Works</a></li>
22         <li><a href="#news">News</a></li>
23         <li><a href="#contact">Contact</a></li>
24         <li>
25           <a
26             href="https://www.Twitter.com"
27             target="_blank"
28             rel="noopener noreferrer"
29             ><img src="./img/twitter.png" alt="Twitter" class="icon"
30            /></a>
31          </li>
32        </ul>
33       </nav>
34     </header>
35
36     <!-- Main -->
37     <div id="main">
38       <picture>
39        <source media="(max-width: 600px)"srcset="./img/main-sp.jpg"/>
40        <img src="./img/main-pc.jpg"alt=""/>
41       </picture>
42     </div>
43
44     <!-- about -->
45     <section id="about" class="wrapper">
46      <h2 class="sec-title">About</h2>
47      <ul>
48        <li>Akisite株式会社</li>
49        <li>web制作会社として設立</li>
50        <li>webサイト・アプリ開発を承ります</li>
51        <li>メールアドレス：xxxxxxx@xxx.com</li>
52      </ul>
53      <p>
54        Webサイト制作やアプリ開発を得意としています。また、Web講師としても活動しており新人の育成をしたい企業も申し込み承ります。
55      </p>
56     </section>
57   </body>
58 </html>
59