スマホ画面で画面幅に可変せず横スクロールが出てしまう

前提・実現したいこと

PC用ページをスマホ用に適用させようとしています。

タブレット幅だと問題ないのですが、
375px等のスマホ幅にすると画面幅に合わせて表示されずに横スクロールが出てしまいます。

フォトショで750px×1334pxのキャンバスサイズで作られた画像を使用しています。
※各画像のサイズは以下の通りです。
logosp.png 604 × 117px
PROFILEspmenu.png 310×70px
WORKSspmenu.png 282×70px
CONTACTspmenu.png 334×70px
CopyRight D〜.png 343 × 21px

375×667pxなどのスマホ画面でデバイスの幅に合わせて表示させる為には、
CSSで半分の数値に指定すれば良いのでしょうか。
また、ブレイクポイントもこれで良いのかわからないのでご教授いただければと思います。

widthなど数値は％で指定しています。

検証はChromeでしています。

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

![イメージ説明](1aa383773dee02a574c2d448eefa6246.jpeg)

該当のソースコード

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<title>DESIGN WORK。</title>
		<link rel="stylesheet" href="index.css">
		<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5b8a09b4cbd441a8840b470cac1e02ec" charset="utf-8"></script>
	</head>
	<body>
		<header>
			<img class="pc" src="images/logo.png" alt="DESIGN WORK。">
			<img class="sp" src="images/logosp.png" alt="DESIGN WORK。">
		</header>
			<div class="main-contents">
				<div class="profile">
					<a href="profile/profile.html">
						<img class="pc" src="images/PROFILE.png">
						<img class="sp" src="images/PROFILEsp.png">
					</a>
				</div>
				<div class="works">
					<a href="http://designwork-j.tumblr.com/" target="_brank">
						<img class="pc" src="images/WORKS.png">
						<img class="sp" src="images/WORKSsp.png">
					</a>
				</div>
				<div class="contact">
					<a href="contact/contact.html">
						<img class="pc" src="images/CONTACT.png">
						<img class="sp" src="images/CONTACTsp.png">
					</a>
				</div>
			</div>
		<footer>
			<img class="pc-f" src="images/CopyRight%20DESIGN%20WORK%20All%20Rights%20Reserved.%20.png">
			<img class="sp-f" src="images/CopyRight%20DESIGN%20WORK%20All%20Rights%20Reservedsp.png">
		</footer>
	</body>
</html>

body {
	background-color:rgb(255,255,255);
	width: 100%
	height: auto;
}

header {
	padding: 91px 23px 0 96px;
}

.main-contents {
	padding-left: 96px;
}

a:hover img {
	opacity: 0.6;
}

.pc { display: block !important; }
.sp { display: none !important; }

.pc-f { display: block !important; }
.sp-f { display: none !important; }

footer {
	float:right;
	padding: 119px 23px 24px 0;
	position: fixed;
	right: 0;
	bottom: 0;
}

@media (max-width: 750px) {

	* {
		box-sizing: border-box;
	}

	body {
		max-width: 100%;
		height: auto;
	}

	img {
		max-width: 100%
		height: auto;
	}

	header {
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 100px 70px;
	}

	.main-contents {
		padding: 100px 70px;
	}

	a:hover img {
		opacity: 1;
	}
	
	.pc { display: none !important; }
	.sp { display: block !important; }

	.profile {
		max-width: 100%;
		height: auto;
		padding-bottom: 60px;
	}
	
	.works {
		max-width: 100%;
		height: auto;
		padding-bottom: 60px;
	}

	.contact {
		max-width: 100%;
		height: auto;
	}

	.pc-f { display: none !important; }
	.sp-f { display: block !important; }
	
	footer {
		max-width: 100%;
		height: auto;
		position:static;
		float: none;
		margin: 0 auto;
		padding: 240px 180px 10px 180px;
	}
}

試したこと

ブレイクポイント（480px以下）をもう一つ増やし
width50％で指定しても上手くいきませんでした。

yoshinavi

2018/09/25 10:26

＞フォトショで750px×1334pxのキャンバスサイズで作られた画像を使用しています。　→　これはどこの部分ですか？すべてがこのサイズなのですか？

mgm1989

2018/09/26 14:33

デザイナーがフォトショで作成したページ全体のサイズがそれです。各画像のサイズを質問に追加致します。

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

回答1件

ベストアンサー

下記CSSのコードにmax-width: 100%の値の後にセミコロン（;）を付与してみてください。

CSS
1img {
2  max-width: 100%　/* ← セミコロン(;)の抜け */
3  height: auto;
4}

-追記-
再度読み返したところ、CSS「body」も一部セミコロンが抜けています。全体的にコードの記述ミスが無いか見直してみてください。

投稿2018/09/26 20:08

編集2018/09/26 20:12

yoshinavi

総合スコア3523

mgm1989

2018/09/28 06:30

回答ありがとうございます。この問題は解決しました！！ケアレスミスでお恥ずかしいです… 記述の確認しっかりやっていこうと思います。

yoshinavi

2018/09/28 10:33

「あれっ？おかしいなぁ？」の時に、「焦れば焦るほど」ケアレスミスは「見えなく」なります。ひと呼吸おいて、文法的な間違いよりも、「抜け」や「ダブり」等の「ケアレスミス」を先に見る癖をつけると良いかと思います。解決されて何よりです。 (^^)

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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