ローカルでは正しく表示されますが、サーバーにアップすると崩れます

###前提・実現したいこと
WEBデザイン経験1年（うち実務経験半年）です。
デザイン事務所に勤めたことが無く、質問出来る同僚がおりません。

html5&css3で企業HP内の１ページを作成しています。
ローカルでは望み通りに表示されるのですが、サーバーにアップするとレイアウトが完全に崩れます。

※質問をするのが初めてなので、もし失礼な点がありましたら、ご指摘頂けると助かります。
ファイル内容を全てアップしようと試みましたが、文字数オーバーで叶いませんでした。

何卒よろしくお願い致します。

###発生している問題

サーバーにアップするとレイアウトが完全に崩れます。
【詳細】
cssで指定している文字色(文字背景色)、GoogleFonts、以外の要素が全て崩れています。
例）ロゴのサイズ指定、メニューのfloat、画像の角丸、画像のfloat など、80%が崩れています。

###該当のソースコード

html5
1
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xmlns:math="http://www.w3.org/1998/Math/MathML" xml:lang="en" lang="en">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6<meta http-equiv="Content-Style-Type" content="text/css">
7<meta http-equiv="Content-Script-Type" content="text/javascript">
8<meta name="description" content="Okuyokawa, ultimate sake brewed only for Yokohama Kimijimaya by Honda Shouten well known as Tasuriki's brewer">
9<meta name="viewport" content="width=device-width,initial-scale=1.0">
10<meta name="keywords" content="sake,nihonshu,ultimate sake,Okuyokawa,Junmaidaiginjo,Junmai Daiginjo,Yokohama Kimijimaya,Yokohamakimijimaya,Tatsuriki,Hondashouten,Honda Shouten">
11<link href="https://fonts.googleapis.com/css?family=Baloo|Katibeh|Chewy" rel="stylesheet">
12<link rel="stylesheet" href="css/reset.css">
13<link rel="stylesheet" href="css/okuyokawa_en.css" type="text/css">
14<title>Okuyokawa Junmai Daiginjo</title>
15</head>
16</html>

css3
1
2@charset "UTF-8";
3
4html {overflow-y:scroll;}
5body {
6   margin:0;
7   padding:0;
8   line-height:1.6;
9   letter-spacing:1px;
10   font-family:Verdana, Helvetica, sans-serif;
11   font-size:13px;
12   color:#727272;
13   background:#ffffff;
14}
15br {letter-spacing:normal;}
16a {
17   color:#727272;
18   text-decoration:none;
19}
20a:hover {text-decoration:none;}
21img {border:0;}
22.frame{border-radius: 10px;}
23h1,h2,h3,h4,h5,h6 {margin:0;}
24.cf:after {
25    content: ""; 
26    display: block; 
27    clear: both;
28}
29.pc{display: block;}
30.sp{display: none;}
31.myWebFontClass{font-family: 'Chewy';}
32table{
33    margin-left: 2%;
34    float: left;
35    margin-bottom: 2%;
36}
37table th{
38    border-collapse: collapse;
39    border: solid 1px;
40    background-color: #f2f2f2;
41    padding: 2%;
42    vertical-align: middle;
43}
44table tr{
45    border-collapse: collapse;
46    padding: 1%;
47    color: #6f6f6f;
48}
49table tr td{
50    border-collapse: collapse;
51    border: solid 1px #6f6f6f; 
52    padding: 3%;
53}
54#prix{clear: both;}
55.buy a{
56    text-decoration: none;
57    padding: 1% 1% 1% 0;
58    text-align: center;
59    background-color: #f6a3b0;
60    color: #fff;
61    display: block;
62    width: 30%;
63    margin-top: 3%;
64}
65.buy a:hover{ 
66    background-color: #fff;
67    color: #f6a3b0;
68    border: solid 2px #f6a3b0;
69    transition: 1s;
70}
71#prologue{
72    margin-bottom: 10%;
73    padding: 2%;
74}
75#a,#b{width: 48%;}
76#a{margin-right: 2%;}
77h1 {
78   margin:0;
79   padding:1%;
80   font-size:24px;
81}
82#wrapper {
83   width:1024px;
84   margin:0 auto;
85   background:#fff;
86}
87#header {
88   width:auto;
89   margin:1% 0 5% 0;
90   height: 80px;
91   background-image: url(../img/yk-headerlogo.jpg);
92   background-repeat: no-repeat;
93   background-position: center;
94}
95#main {
96   margin:1% 0;
97   width:1024px;
98   padding:0;
99}
100#footer {
101   clear:both;
102   margin:0;
103}
104.cf:after{
105  content: "."; 
106  display: block; 
107  height: 0; 
108  font-size:0;	
109  clear: both; 
110  visibility:hidden;
111}
112/* 回り込み解除 */
113#contents:after {
114   content:"";
115   display:block;
116   height:0;
117   clear:both;
118   visibility:hidden;
119}
120/* メニュー詳細 */
121#menu ul {
122   margin:0;
123   padding:0;
124   list-style:none;
125}
126#menu li {
127   float:left;
128   margin-right:1.671px;
129}
130#menu li a{
131   display:block;
132   width:169px;
133   color:#224b8f;;
134   text-align:center;
135   line-height:2.5;
136}
137#menu li a:hover{
138   color:#fff;
139   background:#82a9da;
140}
141/* 回り込み解除 */
142#menu ul:after{
143   content:"";
144   display:block;
145   height:0;
146   clear:both;
147   visibility:hidden;
148}
149/* メイン詳細 */
150#main h2 {
151   margin:2% 0;
152   padding-left:1%;
153   font-size:15px;
154   font-weight:bold;
155   border-left:5px solid #82a9da;
156}
157#main p{margin:0 0 1em 0;}
158#main .morceau{margin-bottom: 5%;}
159#commentaire{
160    margin: 10% 0;
161    border: solid 2px #82a9da;  
162    padding: 2%;
163}
164#commentaire h4{
165    background-color: #82a9da;
166    margin-top: 3%;
167    padding: 2%;
168    color: #fff;
169    text-align: center;
170}
171#sakelover{margin-top: 5%}
172.comment{
173    padding: 1%;
174    display: block;
175    background-color: #dbedff;
176    display: block;
177    text-align: center;
178}
179.color{
180    color: #82a9da;
181    font-weight: bold;
182}
183/* サイドバー詳細 */
184#sidebar .section {
185   background:#82a9da;
186}
187#sidebar .search{
188   margin: 5% 0;
189}
190#sidebar h2 {
191   padding:2%;
192   text-align:center;
193   font-size:15px;
194   font-weight:bold;
195   color:#fff;
196   border-bottom:1px solid #fff;
197   margin: 0 auto;
198}
199#sidebar ul {
200   margin:0;
201   padding: 1%;
202   text-align: center;
203}
204#sidebar li {
205   margin:0;
206   padding: 1% 0;
207   list-style:none;    
208}
209#sidebar li a{
210    color: aliceblue
211}
212/* フッター詳細 */
213.copyright {
214   padding:20px 0;
215   text-align:center;
216   font-style:normal;
217   font-size:11px;
218   color:#727272;
219}
220/* スマホ対応 */
221@media screen and (max-width:640px){
222.pc{
223    display: none;
224    }
225.sp{
226    display: block;  
227    }
228img{
229	float:none;
230	max-width:100%;
231	margin:0 auto;
232	display:block;
233	clear:both;
234}
235#a,#b{
236    width: auto;
237}
238#a{
239    margin-right: 0;
240}
241#wrapper{
242	width:97%;
243	border:none;
244}
245#header,#footer{
246	width:100%;
247	margin:5% 0;
248}
249h1{text-align: center;}
250#menu{margin:0;}
251#menu ul{margin:0 auto;}
252#menu ul li{
253    margin-right:1.671px;
254    border-bottom:1px dotted #82a9da;
255    width:100%;
256    line-height: 44px;
257}
258#menu ul li:first-child{
259    border-top:1px dotted #82a9da;   
260    }
261#menu ul li a{
262    width:100%;
263    color: #224b8f;
264    }
265#main{
266	float:none;
267	width:98%;
268	padding:0 1%;
269	word-break:break-all;
270}
271#sidebar{
272	float:none;
273	width:100%;
274	padding:40px 0 0;
275}
276.buy a{
277    line-height: 40px;
278    margin: 10% 0;
279    width: auto;
280}
281#main .ex{
282    margin-bottom: 0;
283    margin-top: 5%;
284}
285table th,h4,h1,p,h2{
286    word-break: normal;
287    }
288.cf{
289    margin-bottom: 20%    
290    }
291#main .bottom{
292    margin-bottom: 20%;    
293    }
294#commentaire{
295    margin-bottom: 20%;    
296    }
297}

###過去の質問を確認し、試したこと

Chrome上でキャッシュの削除
サーバーに最新のファイルがアップされているか確認
目を皿のようにしてコーディングにケアレスミスが無いか確認

恥ずかしながら一人では原因を突き止めることが出来ず、質問させて頂いております。

###補足情報
【使用ツール】
Bracketsを使用しています。

【ディレクトリ構成】
css ├ okuyokawa_en.css
banner ├
img ├

index.html
index.php
style.css
okuyokawa_info_en.html

【事象が発生したブラウザ】
Google Chrome
Firefox
IE
Android
Iphone

【レンタルサーバ】
ファーストサーバ
ギガント２

###お礼
皆様から頂いたアドバイスの全てが、非常に勉強になりました。
ベストアンサーを選ぶのが心苦しかったのですが、アドバイス通りに作業をして解決出来た回答を選びました。
恥ずかしいので、問題ページのURLは削除させて頂きます。

kanimaru

2017/05/10 02:05

差し支えなければ、サーバに配置したファイルのディレクトリ構成を追記いただけますでしょうか。

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

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

関連した質問