どのデバイスを用いても画面に余分な余白を作らず、画面全体サイズにぴったり収まるようなwebページを作りたい

コーディング初心者なのですが、自分が現在使っているmacbookの１３インチを基準にコーディングをしていたのですが、画面全体が１３インチサイズに収まっているのかと思っていたら、横にスクロールできるほど余白がありました。
特にサイズの設定などはしていないのですが、初期値としてそもそも大きめに設定されているのでしょうか？
各デバイスごとに画面全体にぴったり収まるように作りたいと思っているのですが、余分な余白を消して画面全体に表示するにはbootstrapのグリッドシステムを使ってやろうと思っています。
そこで、質問といたしましては、
・実際のコーディングに加え、どうすれば画面全体にぴったり収まるようにコーディングできるのか（余分な余白が出ないようにコーディングする方法）
・スマホ対応のレスポンシブデザインをする際にはbootstrapを用いてできるのか
この二つについてご回答していただけると幸いです。

<html>
<head>
	<title>安田悠汰が作成したサンプルです</title>
	<link rel="stylesheet" type="text/css" href="チェックテスト.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>

	<div class="site-header">
		<p class="ryoukin">
			予想月収　<span class="yen">¥3億</span>
		</p>
		<button type="button" value="はじめる" class="button">
			テストです
		</button>
		<img class="button" src="https://images-na.ssl-images-amazon.com/images/I/31SqyQ7PphL.jpg">
	</div>

	<div class="haikei">
	<br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br>
		<div class="box">
			<content class="daimei">
				<p class="midasi">
					あなたのスキルに応じて、最適な転職を<br>
				</p>

				<p>
					どれくらいの年収が見込めるのかチェック
				</p>

				<input type="text" name="年収"   >

				<div class="cp_ipselect cp_sl01">
				<select required>
					<option value="" hidden>Choose</option>
					<option value="1">cat</option>
					<option value="2">dog</option>
					<option value="3">rabbit</option>
					<option value="4">squirrel</option>
				</select>
				</div>

				<div class="cp_ipselect cp_sl01 aiueo">
				<select required>
					<option value="" hidden>Choose</option>
					<option value="1">cat</option>
					<option value="2">dog</option>
					<option value="3">rabbit</option>
					<option value="4">squirrel</option>
				</select>
				</div>
				
				<p>
					<span class="okane">123,456,789円</span>
					<span class="tuki">月あたり</span>
				</p>

				<button type="button" value="akaka" class="button2">
					今すぐ年収をチェック
				</button>
			</content>
		</div>
	</div>
	
	<div class="kajou">
		<p class="kyoutyou">
			これはサンプルです。
		</p>

		<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
	</div>

	<div class="kajou">
		<p class="kyoutyou">
			これはサンプルです。
		</p>

		<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
		
	</a>
	</div>
	

	<div class="kajou">
		<p class="kyoutyou">
			これはサンプルです。
		</p>

		<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
	</div>

	

	<hr>

	<h1>３ステップでホスティング</h1>

	<div>
		
		<div class="kajou tuika">
		<p class="kyoutyou">
			これはサンプルです。
		</p>

		<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
	</div>

	<div class="kajou tuika">
		<p class="kyoutyou">
			これはサンプルです。
		</p>

		<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
	</div>

	<div class="kajou tuika">
		<p class="kyoutyou">
			これはサンプルです。
		</p>

		<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
	</div>

	<div class="setumei">
		<p class="kanma">&quot;</p><br>
		<p class="honbun">
			「ホスティングの収入で、キッチンを新調したり、他の改装費用の一部を賄うことができるようになりました」
		</p>
		<p class="syoukai">●●さんは東京在住。ホストになって経済的なゆとりができました。</p>
		<button class="check">ホスト実践例をチェック</button>
	</div>

	<hr>

	<h1 class="situmon">よくある質問の答え</h1>

	<table>
		<tr>
			<td>ああ</td><td>aa</td>
		</tr>
		<tr>
			<td>ああ</td><td>aa</td>
		</tr>
		<tr>
			<td>ああ</td><td>aa</td>
		</tr>
	</table>


	<br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>
コード.site-header{
	position: fixed;
	z-index: 500;
	top: 0px;
	left: 0px;
	height: 80px;
	width: 100%;
	background: white;
	

}

.button{
	height: 40px;
	width: 40px;
	position: absolute;
	top: 20px;
	left: 20px;
	background-color: #CC3333;
	border-radius: 10px;



}

.button2{
	height: 50px;
	width:95%;
	background-color:#CC3333;
	color: white;
	border-radius: 10px;

}

.haikei{
background: url(https://eikaiwa.dmm.com/blog/wp-content/uploads/2016/05/20160317182055.jpg);
background-size: cover;
display: block;


}

.box{
	position: absolute;
	z-index: 1;
	top: 180px;
	right: 120px;
	width: 450px;
	height: 500px;
	padding: 50px 40px 	40px 40px;
	background-color: white;
	border-radius: 10px;



}

p.ryoukin{
	text-align: right;
	position: absolute;
	top: 17px;
	right: 170px;
	color: #C0C0C0;
	font-size: 15px;




}
.yen{
	font-size: 30px;

}

button.button{
	margin: 0 0 0 auto;
	top:25px;
	right: 50px;
	height: 30px;
	width: 100px;
	color: white;





}

.midasi{
	color: black !important;
	font-family: 'ヒラギノ角ゴ StdN';
	font-size: 30px;




}

.daimei>p{
	color: gray;
	font-family: 
	font-size:;
}

input{
	height: 40px;
	width: 350px;
}

.cp_ipselect {
	display: inline-flex;
	overflow: hidden;
	width: 60%;
	margin:10px 0px 0px 0px;
	text-align: center;
}

.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
	padding: 8px 38px 8px 8px;
	color: #666666;
}

.aiueo{
	width: 34%;
}


.okane{
	display: inline-block;
	font-size: 30px;
	font-family: 'Impact';
	color: black;
	margin: 30px 5px 0px 0px;

}

.kajou{
	position: relative;
	display: inline-block;
	margin: 70px 20px 90px 90px;
	height: auto;
	width: 350px;
	color: #808080;
	font-family: 
	background-color: white;

}

.kyoutyou{
	color:black;
	font-size: 20px;
}

.linkdemo{
	display: block;
	color: #4169e1;
	position:relative;
	top: 0px;
	left: 610px;

}

hr{
	position: relative;
	top:150px;
	background-color: black;
	width: 10%;

}

h1{
	display: block;
	position: relative;
	top: 200px;
	left: 470px;
	font-size: 300px;

}

.tuika{
	position: relative;
	top: 200px;
}

.setumei{
	position: relative;
	display: inline-block;
	margin:220px 0px 0px 350px;
	height: auto;
	width: 800px;
	color: #808080;
	font-family: 
	background-color: white;

}

.honbun{
	font-size: 30px;
	font-family: 'Tahoma';
	color:black;

}

.check{
	background-color:white;
	border-color: black;
	width: 250px;
	height: 50px;
	font-family:'Tahoma';
	margin-left: 30%;
	border-radius: 10px 10px 10px 10px;
}

.syoukai{
	margin-left: 15%;
}

.situmon{
	margin-left: 25px;
	font-size: 50px;

}

table{
	width: 100%;
	position: relative;
	top: 300px;
	left:300px;
	color:#33CCCC;

}

td{
	padding: 25px 500px 25px 0px;
}

soliste16

2020/03/11 00:23

レスポンシブ対応以前に、HTMLとCSSを基本から学んだ方がいいと思います。ソースコードの拾い食いばかりではなかなか上達しません。

miyabi_pudding

2020/03/11 01:42

スタイルが、</html>以降の、<style>要素外に記載されていますが、実コードでもそうなのでしょうか？違うのであれば、正確なソースコードを記載してください。

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

回答3件

どうすれば画面全体にぴったり収まるようにコーディングできるのか
まずは「幅が広がってしまう原因が、どの部分にあるか」を調べてみると良いと思います。

原因の探し方は色々あると思うのですが、自分でやるとしたら下記のように探します。

HTMLの、bodyの中身を全てコメントアウト
少しずつコメントアウトを外して表示させていく
どこかで画面の幅が広がる部分が出てくる→その部分が原因

原因になった箇所のCSSも、同じ手順で「CSSのどの指定が原因なのか」を探します。

レスポンシブデザインをする際にはbootstrapを用いてできるのか
できるかできないかについてで言えば「できる」が回答になりますが、「bootstrap レスポンシブ」等で検索すると色々出てくると思うので調べてみてください。

投稿2020/03/11 01:04

kyoruni

総合スコア93

横にスクロールできるほど余白がありました

CSS の h1 セレクタを確認してみてください。
H1 内包するテキスト（記述コンテンツ）のフォントサイズが 300px だと、簡単に横幅を食います。

<h1>–<h6>: HTML の見出し要素

どうすれば画面全体にぴったり収まるようにコーディングできるのか

（余分な余白が出ないようにコーディングする方法）

HTMLで構造を決めて、CSSで見栄えを適用するだけです。
親子で位置が決まるCSSプロパティの法則やサイズの管理が重要です。

特にサイズの設定などはしていない

意図した表示にならないのであれば、サイズの管理を怠っているとも言えます.

愚直にCSSを書く方法論は回答したことがあります。

投稿2020/03/21 12:26

AkitoshiManabe

総合スコア5434

テキストやブロックの「中央揃え」「中央寄せ」について、初心者が最初に覚えるべき2つのテクニックを適用することで、解決に近づくと思います。

[1] 文字の左右中央揃え (指定した要素の中のテキストが中央揃えになる)

CSS
1p {
2  /* display: inline; が指定されている前提 */
3  text-align: center;
4}

[2] ブロックの左右中央寄せ (指定した要素自体が親要素に対して中央寄せになる)

CSS
1div {
2  /* display: block; (など) が指定されている前提 */
3  margin: 0 auto;
4  width: 200px;
5}

例えば下記、テキスト (見出し) を中央揃えする目的でposition: relative;をしている箇所はleftの記述を消してtext-align: center;に変更

CSS
1h1 {
2    display: block;
3    position: relative;
4    top: 200px;
5    
6    /* left: 470px; */
7    text-align: center;
8    
9    font-size: 300px;
10}

また以下のように、ブロックを中央寄せする目的で指定されているmargin-left: 350px;やwidth: 800px;は、以下のように書き換え

CSS
1.setumei {
2    position: relative;
3    
4    /* display: inline-block; */
5    display: block;
6    
7    /* margin:220px 0px 0px 350px; */
8    margin: 220px auto 0px auto; /* margin: 0 auto; の応用 */
9    
10    height: auto;
11    
12    /* width: 800px; */
13    max-width: 800px;
14    
15    color: #808080;
16    background-color: white;
17}