cssで謎の左の隙間ができる。

謎の左の隙間を決して、.subを横480px,たて260pxにしたいです。

ツイッターのLPページをまねしてつくっています。見本にしているサイト。これと全く同じものを目指してつくっています。
リンク内容

.subを横480px,たて260pxにしたいです。

該当のソース

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>「いま」を見つけよう</title>
7  <link rel="stylesheet" href="stylesheet.css">
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
9</head>
10
11<body>
12  <div class="header">
13    <i class="fab fa-twitter twitter_icon"></i>
14    <h1>「いま」起きていることを見つけよう</h1>
15  </div><!-- header -->
16  <div class="main">
17    <p>Twitterをはじめよう</p>
18    <div class="top-account-btn">アカウント作成</div>
19    <div class="top-log-in">ログイン</div>
20  </div><!-- main -->
21  <div class="sub">
22    <ul>
23      <li><i class="fas fa-search serch-icon"></i>　あなたの「好き」をフォローしましょう。</li>
24      <li><i class="fas fa-users chat-icon"></i>　話題のトピックを追いかけましょう。</li>
25      <li><i class="far fa-comment people-icon"></i>　会話に参加しましょう。</li>
26    </ul>
27  </div><!-- sub -->
28    <div class="bottom">
29      <ul>
30    <li><div class="bottom-account-btn">アカウント作成</div></li>
31    <li><div class="bottom-log-in">ログイン</div></li>
32      </ul>
33    </div><!-- bottom -->
34
35  <div class="footer">
36    <ul>
37    <li><a href="#">Twitterについて</a></li>
38    <li><a href="#">ヘルプセンター</a></li>
39    <li><a href="#">ブログ</a></li>
40    <li><a href="#">ステータス</a></li>
41    <li><a href="#"> 求人</a></li>
42    <li><a href="#">利用規約</a></li>
43    <li><a href="#">プライバシーポリシー</a></li>
44    <li><a href="#">Cookie</a></li>
45    <li><a href="#">広告情報</a></li>
46    <li><a href="#">ブランド</a></li>
47    <li><a href="#">広告</a></li>
48    <li><a href="#">マーケティング</a></li>
49    <li><a href="#">ビジネス</a></li>
50    <li><a href="#">開発者</a></li>
51    <li><a href="#">プロフィール一覧</a></li>
52    <li><a href="#">設定</a></li>
53    <p>&copy;2018 Twitter,Inc.</p>
54    </ul>
55  </div><!-- footer -->
56</body>
57

css
1body {
2
3  background-color: rgb(27, 40, 54);
4}
5
6.twitter_icon {
7  color: rgb(27, 149, 224);
8  font-size: 1.5em;
9
10}
11
12.header h1 {
13  color: #fff;
14}
15
16.main p {
17  color: #fff;
18
19}
20
21ul {
22  list-style: none;
23}
24
25.sub ul {
26  color: #fff;
27}
28
29.footer {
30  width: 100%;
31}
32
33.footer ul {
34  text-decoration-style: none;
35}
36
37.footer ul li {
38  display: inline-block;
39}
40
41.footer a {
42  text-decoration: none;
43  color: rgb(136,153,166);
44  font-size: 13px;
45}
46
47.footer p {
48  color: rgb(136,153,166);
49
50}
51
52
53/* スマホサイズ */
54@media all and (min-width: 480px) {
55
56  body {
57    width: 100%;
58    height: 100%;
59  }
60
61  .twitter_icon {
62    padding-top: 8px;
63    padding-left: 40px;
64    font-size: 2.3em;
65  }
66
67  .header h1 {
68    padding-left: 40px;
69    font-size: 30px;
70    line-height: 1.3em;
71  }
72
73  .main {
74    padding-top:20px;
75    padding-left: 40px;
76    font-size: 15px;
77    font-weight: bold;
78  }
79
80  .top-account-btn {
81    width: 380px;
82    height: 37px;
83        color: #fff;
84        font-size: 13px;
85        font-weight: bold;
86        text-decoration:none;
87        display: block;
88        text-align:center;
89        background-color: rgb(27, 149, 224);
90        border-radius: 25px;
91        line-height: 2.84615385;
92    }
93
94    .top-log-in {
95      color: rgb(27, 149, 224);
96      width:378px;
97      height: 35px;
98      font-size:13px;
99      font-weight: bold;
100      text-decoration: none;
101      display:block;
102      text-align:center;
103      background-color: rgb(27, 40, 54);
104      border-radius: 25px;
105      border: 1px solid rgb(27, 149, 224);
106      line-height: 2.84615385;
107      margin-top: 10px;
108    }
109
110  .sub {
111    width: 100%;
112    height: 260px;
113  }
114
115  .sub ul {
116
117    background-color: rgb(27, 149, 224);
118  }
119
120  .sub li {
121    font-weight: bold;
122    font-size: 19px;
123    padding-top: 30px;
124  }
125
126  .bottom {
127    display: inline-block;
128    padding-top: 3px;
129    font-size: 15px;
130    font-weight: bold;
131  }
132
133  .bottom ul {
134  list-style-type: none;
135  text-align: center;
136  }
137
138  .bottom ul li {
139     display: inline-block;/*inline-blockにします*/
140
141  }
142
143  .bottom .bottom-account-btn {
144    width: 180px;
145    height: 37px;
146        color: #fff;
147        font-size: 13px;
148        font-weight: bold;
149        text-decoration:none;
150        display: block;
151        text-align:center;
152        background-color: rgb(27, 149, 224);
153        border-radius: 25px;
154        line-height: 2.84615385;
155        margin-bottom: 5px;
156    }
157
158    .bottom .bottom-log-in {
159
160      color: rgb(27, 149, 224);
161      width: 180px;
162      height: 37px;
163      font-size:13px;
164      font-weight: bold;
165      text-decoration: none;
166      display:block;
167      text-align:center;
168      background-color: rgb(27, 40, 54);
169      border-radius: 25px;
170      border: 1px solid rgb(27, 149, 224);
171      line-height: 2.84615385;
172
173    }
174
175  }/* スマホサイズ */
176
177
178  /* タブレットサイズ */
179  @media all and  (min-width:768px) and ( max-width:1024px ) {
180
181  }  /* タブレットサイズ */
182
183/* PCサイズ */
184  @media all and (min-width: 1024px) {
185  }/* PCサイズ */

試したこと

css
1.sub {
2width: 100%;
3height: 260px;
4}

書きましたが、反映されていないようです。

補足情報（FW/ツールのバージョンなど）

グーグル、アトムを使っています。

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

回答2件

ソースを見る限り、どこにも.subを480pxにするコードが書かれていないようですが…？

投稿2018/11/14 03:23

aKusano

総合スコア3763

hikari_poppo

2018/11/14 03:26

cssに @media all and (min-width: 480px) { .sub { width: 100%; height: 260px; } } と書きました。

aKusano

2018/11/14 03:40

えーと、@media all an (min-width: 480px)は「viewport幅が480px以上の時」という条件を示しているだけであって、コンテンツのスタイルを指定するものではないです。実際に.subの幅を指定しているのは「.sub {width: 100%; }」です。ズバリ、.subの幅は100%と書いてあるので、これでは480pxになるわけがありませんね。

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