HTMLファイルをアップロードするとレイアウトが完全に崩れてしまいます。

前提・実現したいこと

html、css初心者です。
独学で相談できる人がいなく困っています。

html、cssでサイトを作っており、ローカル環境では正常に表示されるのですが、
サーバー上にアップロードするとレイアウトが完全に崩れてしまいます。
見たところ、cssと画像全てが上手く表示されてないようです。

原因がわかる方いれば何卒よろしくお願い致します。

html
1<head>
2    <!-- Required meta tags -->
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5
6    <!-- Bootstrap CSS -->
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
8    <link rel="stylesheet" href="index.css">
9
10    <title>title</title>
11</head>
12<body>
13    <div class="wrapper">
14      <header>
15        <div class="header-a">
16          <div class="h-green">
17            <img src="LINE mobile img/header_banner_text_pc07.png" alt="画像">
18          </div>
19        </div>
20        <div class="h-white">
21          <nav class="navbar navbar-expand-md navbar-white">
22            <a href="#" class="navbar-brand"><img src="LINE mobile img/logo.png" alt="画像"></a>
23            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#menu">
24              <span class="navbar-toggler-icon"></span>
25            </button>
26            <div id="#menu" class="collapse navbar-collapse">
27              <ul class="navbar-nav">
28                <li class="nav-item">はじめに</li>
29                <li class="nav-item">料金プラン</li>
30                <li class="nav-item">端末</li>
31                <li class="nav-item">サポート</li>
32                <li class="nav-item">店舗</li>
33                <li class="nav-item">キャンペーン</li>
34              </ul>
35            </div>
36            <div class="h-apply">
37              <div class="mypage">
38                <a href="#" class="text-success font-weight-bold">マイページ</a>
39              </div>
40              <div class="apply">
41                <a href="#" class="btn btn-success rounded-pill">申し込む</a>
42              </div>
43            </div>
44          </nav>
45        </div>
46      </header>
47  
48      <main>
49        <div class="main1">
50        </div>
51  
52        <div class="main2">
53          <div class="main2-pic">
54            <img src="LINE mobile img/img_top_nowOrder_pc.png" alt="画像">
55          </div>
56          <div class="main2-picc">
57            <img src="RD模写追加画像/img_top_nowOrder_sp.png" alt="画像">
58          </div>
59        </div>
60  
61        <div class="main3">
62          <div class="main3-pic">
63            <img src="RD_pic/new_plan_start_hondatsubasa_pc.png" alt="画像">
64          </div>
65          <div class="main3-picc">
66            <img src="RD_pic/new_plan_start_hondatsubasa_sp.png" alt="画像">
67          </div>
68        </div>

試したこと

・キャッシュの削除
・ディレクトリ構成と指定の仕方が間違っていないかの確認
・コーティングのケアレスミスの確認

補足

【使用サーバー】
Xserver

【FTPクライアントソフト】
File Zilla

html,css,画像フォルダは同じ階層にあり、
画像を指定する時は、フォルダ名/URL
となっています。

他に提示した方が良い情報などがあればアドバイス頂けると助かります。
何卒よろしくお願い致します！

javahack

2020/03/20 14:44 編集

デベロッパーズツールで見たときにエラーは出ていないでしょうか。もし出ていたら、内容を質問文を編集して記載してください。

blueee

2020/03/21 08:30

javahackさん、お返事遅くなり大変申し訳ございません。デベロッパーツールで見ましたが、これと言ってエラー表示はありませんでした。。

Lhankor_Mhy

2020/03/21 08:40 編集

「画像全てが上手く表示されてない」とのことですが、ご提示のコードには画像はないようです。 CSSで指定されているのですか？

blueee

2020/03/21 08:56

Lhankor_Mhyさん、ご連絡ありがとうございます。すいません、文字数制限で全部はできませんでしたが、今htmlコードを追加しました。何かお気づきの点ございましたら、ご教授お願い致します。

Lhankor_Mhy

2020/03/21 09:06

デベロッパーズツールのElementsタブで、画像のURLにマウスカーソルを当てると、画像のサムネールが表示されると思いますが、それは問題なく表示されていますか？

blueee

2020/03/21 09:14

Lhankor_Mhyさんサムネールは表示されず、「http~」のように、URLのみが表示されます。

Lhankor_Mhy

2020/03/21 09:25

補足ありがとうございます。 new1ro さんへのコメントに「「画像」は通常通りに表示されました」とお答えになっていますが、その画像が表示されたURLと、サムネールの代わりに表示されたURLは同じものですか？また、URLの上で右クリックすると「Open In new tab」というメニューがあり、そこから別タブでそのURLを開くことができると思いますが、サムネールが表示されていない画像URLをこの方法で開いた場合は、画像は表示されていますか？

blueee

2020/03/21 09:42

Lhankor_Mhyさんサムネール代わりに表示されたURLは同じものでした。ただ、「Open In new tab」でURLを開くと、画像が表示されずエラーメッセージが出てきました！「404 File not found」という内容のものです。

Lhankor_Mhy

2020/03/21 09:46

その画像は通常通り表示されていたのですよね？ということは、そのURLをコピーしてアドレスバーに張り付けて開くと、画像が表示されるということですか？ 404になる時と、ならずに画像が表示される時の、条件の違いを整理できそうですか？

blueee

2020/03/21 09:59

Lhankor_Mhyさんその画像のURLをアドレスバーにコピペすると画像は表示されませんでした。。おそらくですが、自分の勘違いだったと思われます。以前「表示された」というのは、フォルダに入れていた画像ファイルをクロームのタブの所にドラッグ&ドロップして表示されたので、それを「ブラウザで表示する」事だと思いこんでました。知識不足で話しを複雑にしてしまい申し訳ございません。

Lhankor_Mhy

2020/03/21 10:32

ありがとうございます。それはCSSについても同様ですか？

blueee

2020/03/21 10:42

Lhankor_Mhyさんはい、CSSも同様です。

Lhankor_Mhy

2020/03/21 10:49

とすると、アップロードできていないか、場所を間違えているか、だと思います。

blueee

2020/03/21 12:13

Lhankor_Mhyさん解決できました。。単純に、cssファイルと画像ファイルがアップロードできていないだけでした。とはいえ、Lhankor_Mhyさんが原因を特定して頂いたおかげです。本当に助かりましたし、勉強にもなりました。ありがとうございました。