レスポンシブデザインの横幅について

前提・実現したいこと

お世話になっております。よろしくお願いします。
iSaraの模写コーディングを行っています。

添付した画像のようにウインドウの横幅とコンテンツの横幅が414pxになっているのに、どうして右側に半分以上の余白ができてしまうのかがわかりません。
お忙しいところ恐縮ですが、解答していただけると幸いです。

該当のソースコード

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>iSara{イサラ}バンコクのノ マドエンジニア育成講座</title>
8    <link rel="stylesheet" href="style.css">
9    <link rel="stylesheet" href="responsive.css">
10    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
12</head>
13
14<body>
15　<header>
16    <div class="header-main" >
17
18        <div class="header-left">
19            <img src="isaralogo.png">
20           <p> バンコクのノマドエンジニア育成講座</p>
21        </div>
22
23        <div class="header-right pc">
24            <a href="#form">お問い合わせ/資料請求はこちら</a>
25        </div>
26        <div class="header-right mb">
27            <img src="form.png">
28            <p>資料請求</p>
29        </div>
30    </div>
31 </header>
32
33   <div class="top-wrapper">
34
35       <div class="main-top">
36          <h2>プログラミングで<br>人生の安定を手にいれよう</h2> 
37          <img src="isaralogolarge.png">
38          <p>バンコクのノマドエンジニア育成講座 <br>iSara[イサラ]</p>
39       </div>
40
41       <div class="main-bottom">
42           <p>まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p>
43           <p><span>※受講料金は実質０円です。詳しくは資料請求をどうぞ。</span></p>
44           <a href="#form">お問い合わせ/資料請求はこちら</a>
45           <h3>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</h3>
46           <h3>第７期生：2020年2月17日 ~ 2019年3月7日＊締め切りました</h3>
47           <h3>第8期生：2020年4月〜5月ごろを予定＊資料請求受付中です</h3>
48          <div class="sns">
49        　　 <a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fisara.life%2F&ref_src=twsrc%5Etfw&text=iSara%5B%E3%82%A4%E3%82%B5%E3%83%A9%5D%EF%BD%9C%E3%83%90%E3%83%B3%E3%82%B3%E3%82%AF%E3%81%AE%E3%83%8E%E3%83%9E%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E8%82%B2%E6%88%90%E8%AC%9B%E5%BA%A7&tw_p=tweetbutton&url=https%3A%2F%2Fisara.life%2F" class="twitter"><i class="fab fa-twitter"></i>ツイート</a>
50             <a href="https://www.facebook.com/" class="facebook"><i class="far fa-thumbs-up"></i>いいね！</a>
51             <a href="https://www.facebook.com/" class="facebook">シェア</a>              
52          </div> 
53       </div>
54   </div>

css
1
2body{
3    width: 100%;
4    height: auto;
5    margin: 0;
6    height: auto;
7   
8}
9
10header{
11   width: 100%;
12   height:0px;
13   
14}
15
16.header-main{
17    width: 100%;
18    background-color: #fff;
19    height: 60px;
20    position: fixed;
21    top:0;
22    z-index: 30;
23}
24
25.header-left{
26    font-size: 14px;
27    display: inline;
28    position: absolute;
29    left: 280px;
30    top:2px;
31    display: flex;
32}
33
34.header-left p{
35    position: relative;
36    top: 10px;  
37}
38
39.header-left img{
40    width: 128px;
41}
42
43.header-right{
44    float: right;
45    width: 317px;
46    line-height: 40px;
47    position: absolute;
48    right: 250px;
49    top: 10px;
50}
51
52.header-right a{
53    font-size: 14px;
54    background-color:#da6b64;;
55    color: #fff;
56    text-decoration: none;
57    border-radius: 25px;
58    display: block;
59    text-align: center;
60    
61
62}
63
64.top-wrapper{
65    margin-top:35px ;
66    position: relative;
67}
68
69.main-top{
70    width: 100%;
71    height: 450px;
72    background-repeat: no-repeat;
73    background-size: cover;
74    background-position: center;  
75    text-align: center; 
76   
77    background-image: url("main.jpg")  
78     
79}
80
81.main-top h2{
82    font-size: 28px;
83    line-height: 60px;
84   margin-bottom: 0;
85}
86.main-top p{
87    font-size: 20px;
88    font-weight: bold;
89}
90.main-top img{
91    width: 317px;
92    height: 111px;
93    
94}
95
96.main-top h2,.main-top p,.main-top img{
97    position: relative;
98    top: 50px;   
99}
100
101.main-bottom{
102    background-color: #ebb94d;
103    height: 540px;
104    text-align: center;
105    padding-top: 30px;
106    
107}
108
109.main-bottom p{
110    margin-top: 0;
111    font-size: 20px;
112    color: #fff;
113    font-weight: bold;
114    
115}
116
117.main-bottom span{
118    font-size: 18px;
119    color:#da6b64;;
120    font-weight: normal;
121    background-color: #fff;
122}
123
124.main-bottom a{
125    background-color: #da6b64;;
126    color: #fff;
127    text-decoration: none;
128    display: block;
129    width: 800px;
130    font-size: 28px;
131    font-weight: bold;
132    line-height: 80px;
133    border-radius: 50px;
134    margin: auto;
135    cursor: pointer;
136    margin-top: 45px;
137    margin-bottom: 45px;
138}
139
140.main-bottom h3{
141    font-size: 21px;
142    font-weight: ;
143    color: #fff;
144}
145
146
147.sns .twitter{
148    background-color: #1dcaff;
149    font-size: 5px;
150    display: inline;
151    padding: 5px 10px;
152    border-radius: 0;
153    color: #fff;
154    font-weight: bold;
155    text-decoration: none;
156   
157}
158.sns .facebook{
159    background-color: blue;
160    font-size: 5px;
161    display: inline;
162    padding: 5px 10px;
163    border-radius: 0;
164    color: #fff;
165    font-weight: bold;
166    text-decoration: none;
167}

m.ts10806

2020/05/05 12:52

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

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

回答1件

ベストアンサー

以下、原因となっている箇所を見つけました。

CSS
1.main-bottom a {
2  width: 800px; /* 414pxの横幅しかないのに、800pxが指定されている */
3  max-width: 100%; /* 追加 */
4}

投稿2020/05/05 13:22

編集2020/05/05 13:23

new1ro

総合スコア4528

hachan

2020/05/07 02:32

解決しました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

レスポンシブデザインの横幅について

前提・実現したいこと

該当のソースコード

関連した質問