viewportを設定すると、スマホ画面の左に寄ってしまいます

前提・実現したいこと

初めてHTML＆CSSでランディングページを作っている初心者です。
レスポンシブデザイン、viewportについてお聞きしたいです。

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

PC版を作り終え、レスポンシブデザインでスマホ用・タブレット用を制作する際に問題が発生しております。
ChromeのF12でスマホ用のプレビューを見ているのですが、viewportを設定すると、スマホ画面の左3分の1にしか表示されません。
縦長に表示され、レイアウトも崩れています。
ネットで調べた方法を試すと、変化がないかもしくは画面の左側が拡大されてしまいます。
widthはすべて100％に設定しています。

該当のソースコード

<meta name="viewport" content="width=device-width,initial-scale=1">
```ここに言語を入力
コード
```html
<!DOCTYPE html>
<html>
 <head>
 	<meta charset="utf-8">
   　　　<meta name="viewport" content="width=device-width,initial-scale=1">
 	<title>--</title>
 	<link rel="stylesheet" href="stylesheet.css">
　</head>
　<body>
    <div class="main-wrapper">
    	<div class="container">
    		<div class="copy">
    		 <h1>ーー</h1>
    		</div>
            <img src="aa.png" class="aa">
    		<div class="points">
    		    <div class="point">
    			<span class="sircle"></span>
    			<h2 class="sircle-po">ーー</h2>
    		    </div>
    		    <div class="point">
    			<span class="sircle"></span>
    			<h2 class="sircle-po">ーー</h2>
    		    </div>
    		    <div class="point">
    			<span class="sircle"></span>
    			<h2 class="sircle-po">ーー</h2>
    		    </div>
    		</div>
           </div>
     </div>
   <body>
</html>



``````ここに言語を入力
```css

body {
	margin: 0;
	font-family: "Hiragino Kaku Gothic ProN";
}

html,body{
    width: 100%;
}

.img {
	vertical-align:bottom;
}


h1  {
	font-size: 80px;
	color: #111e3e;
}

p {
	font-size: 16px;
	color: #111e3e;
}


.container {
    width: 100%;
    max-width: 1040px;
    padding: 0 15px;
    margin: 0 auto;
}

* {
	box-sizing: border-box;
}

.main-wrapper {
	margin-top: 60px;
	background-color: green;
        background-size: cover;
        position: relative;
        vertical-align: bottom;
        width: 100%;
}

.aa {
	display: inline-block;
        height: 100%;
	position: absolute;
	bottom: 0%;
	left: 50%;
}

.span {
	display: block;
}

.copy h1 {
	font-size: 46px;
	color: #111e3e;
	padding-top: 100px;
}

.copy span {
	font-size:80px;
}

.sircle {
	display: inline-block;
	width: 185px;
	height: 185px;
	border-radius: 50%;
	background-color: #111e3e;
}

.sircle-po {
	position: absolute;
	text-align: center;
	color: white;
	display: inline-block;
	left: 0;
	top: 0;
	width: 185px;
	font-weight: normal;
}

.points {
	padding: 130px 0 300px 0;
}

.point {
	float: left;
	margin: 0 30px;
	position: relative;
}

試したこと

・width=device-widthを消す
・bodyをdivで囲み、overflow: hidden;をかける
・各wrapperにoverflow: hidden;をかける
・containerにoverflow: hidden;をかける

どこのコードを乗せればよいかわからず、viewportのみの記載となってしまい、申し訳ございません。
追記すべき所があればご教授いただきたいと思います。
よろしくお願いいたします。

m.ts10806

2018/04/18 01:12

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わります。

m.ts10806

2018/04/18 01:13

html、cssを可能な限りご提示ください。回答者も「再現確認」をとった上で回答しています。

m.ts10806

2018/04/18 01:14

また、提示コードだけでは再現確認がとれないときがあります。もし可能であれば現象が起きている画面キャプチャなども添付してください。

m.ts10806

2018/04/18 01:24

すみませんもう1点。ブラウザのスマホプレビューはあくまで簡易機能なので、なるべく実機確認を取ったほうが良いです。「Chromeプレビューで大丈夫だったのに実機でダメだった」なんてざらにあります。（もちろん機能としては素晴しいのですが100％カバーできるわけではありません）

garter

2018/04/18 01:56

mts10806様　アドバイスいただき、ありがとうございます。初心者マークを付けさせていただきました。本来であればtop-wrapperに画像があるのですが、画像は右の空白のところに表示されます。その他、文字や背景等はこのように左に寄って表示されてしまいます。Chromeプレビューのみだと不十分なこと、承知いたしました。ありがとうございます。

m.ts10806

2018/04/18 07:41 編集

細かい指摘で申し訳ないですが、htmlとcssはコードブロックを分けていただけますか？回答者が再現確認をする際にコピーして利用しやすくなります。また、コードブロックの上にファイル名を入れておき、開始部分に言語名を入れておくと最適にハイライトされます。 ```html ```css

m.ts10806

2018/04/18 07:44

現在提示されているcssがstylesheet.cssとしてstylesheet-responsive.cssの内容の提示は可能でしょうか？

m.ts10806

2018/04/18 07:47

↑というのは、今提示されているcssだけだと現象確認がとれなかったためです。スマホプレビューは色々な機種を選べるのでどの機種で現象確認されたかというのも追記いただければと思います。

yoshinavi

2018/04/20 06:53

回答がつかないのは、質問内容に「何をどうしたいのか？」が無いからだと思います。表現したいイメージを画像ソフトや手書き、または参照とするサイト等でも良いので、提示してください。その上で現状の「問題となっている箇所」をコードと併せてご提示されると、回答がつきやすくなると思います。

yoshinavi

2018/04/21 06:44

スミマセン。質問の意味がいまひとつ理解出来ていません。「＞スマホ画面の左3分の1にしか表示されません。」コンテンツ全体の表示が1/3なのでしょうか？PCとスマホでは表示領域のサイズが違いますので、見やすくするために、CSSに「メディアクエリ」を使ってレイアウトをPCやスマホに合わせて変える事が出来ます。「CSS　メディアクエリ」等で検索してみてください。

退会済みユーザー

2018/04/26 08:42 編集

上記の記述ローカルでの確認になりますが、Win7のChromeでiPhone6sのブレビューを見たところ左3分の1にしか表示されるようなことはなく正常に(横幅全体に)表示されてる事確認したのですが、この表示では意図したようにレタリングされていないのでしょうか？スマホ時のデザインはこのようにしたいという事があれば教えてください。