teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問paddingが勝手にかかっていまっている

編集履歴

質問編集履歴

1

CSSにHTMLコードを誤って載せていた為

2019/05/11 22:20

投稿

JunJu
JunJu

スコア16

test CHANGED
File without changes
test CHANGED
@@ -160,115 +160,125 @@
160
160
 
161
161
  ```css
162
162
 
163
- <!DOCTYPE html>
164
-
165
- <html lang="jp">
166
-
167
- <head>
168
-
169
- <meta charset="utf-8">
170
-
171
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
172
-
173
- <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
174
-
175
- <link rel="stylesheet" href="CSS/style.css">
176
-
177
-
178
-
179
-
180
-
181
- <title>TEAM GREY</title>
182
-
183
- </head>
184
-
185
-
186
-
187
- <body>
188
-
189
-
190
-
191
-
192
-
193
- <header>
194
-
195
- <h1>TEAM GRAY</h1>
196
-
197
- <div id="ham-menu">
198
-
199
- <ul>
200
-
201
- <li><a href="#">WORKS</a></li>
202
-
203
- <li><a href="#">SERVICE</a></li>
204
-
205
- <li><a href="#">ABOUT</a></li>
206
-
207
- <li><a href="#">CONTACT</a></li>
208
-
209
- <li><a href="#"><i class="fab fa-instagram"></i></a></li>
210
-
211
- <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
212
-
213
- <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
214
-
215
- </ul>
216
-
217
- </div>
218
-
219
- <div id="menu-background"></div>
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
- <footer>
228
-
229
- <div class="footer-box1">
230
-
231
- <h1>TEAM GRAY</h1>
232
-
233
- <ul class="footer-left">
234
-
235
- <li><a href="#">TOP</a></li>
236
-
237
- <li><a href="#">WORKS</a></li>
238
-
239
- <li><a href="#">SERVICE</a></li>
240
-
241
- <li><a href="#">ABOUT</a></li>
242
-
243
- <li><a href="#">CONTACT</a></li>
244
-
245
- </ul>
246
-
247
- </div>
248
-
249
- <div class="footer-box2">
250
-
251
- <ul class="footer-right">
252
-
253
- <li><a href="#"><p>INSTAGRAM</p><p></p><i class="fab fa-instagram"></i></a></li>
254
-
255
- <li><a href="#"><p>TWITTER</p><i class="fab fa-twitter-square"></i></a></li>
256
-
257
- <li><a href="#"><p>FACEBOOK</p><i class="fab fa-facebook-square"></i></a></li>
258
-
259
- <li><p>Q&A</p></li>
260
-
261
- </ul>
262
-
263
- </div>
264
-
265
- </footer>
266
-
267
- </body>
268
-
269
-
270
-
271
- </html>
163
+
164
+
165
+ body {
166
+
167
+ font-family: `A-OTF 新丸ゴ Pro,H`;
168
+
169
+ color: #FFFFFF;
170
+
171
+ width: 1920px;
172
+
173
+ background-color: #1D1D1D;
174
+
175
+ }
176
+
177
+
178
+
179
+ p {
180
+
181
+ margin: 0;
182
+
183
+ display: inline-block;
184
+
185
+ font-size: 25px;
186
+
187
+ }
188
+
189
+
190
+
191
+
192
+
193
+
194
+
195
+ footer {
196
+
197
+ width: 100%;
198
+
199
+ height: 651px;
200
+
201
+ }
202
+
203
+
204
+
205
+ .footer-box1 {
206
+
207
+ margin: 0;
208
+
209
+ width: 50%;
210
+
211
+ height: 651px;
212
+
213
+ position: relative;
214
+
215
+ float: left;
216
+
217
+ }
218
+
219
+
220
+
221
+ .footer-box2 {
222
+
223
+ margin: 0;
224
+
225
+ width: 50%;
226
+
227
+ height: 651px;
228
+
229
+ position: relative;
230
+
231
+ float: left;
232
+
233
+ }
234
+
235
+
236
+
237
+
238
+
239
+
240
+
241
+ .footer-left {
242
+
243
+ position: absolute;
244
+
245
+ top: 192px;
246
+
247
+ <--! パディングが40px空いてる -->
248
+
249
+ padding-left: 0;
250
+
251
+ }
252
+
253
+
254
+
255
+ .footer-right {
256
+
257
+ position: absolute;
258
+
259
+ top: 189px;
260
+
261
+ right: 0;
262
+
263
+ left: 0:
264
+
265
+ }
266
+
267
+
268
+
269
+ footer li {
270
+
271
+ margin-bottom: 52px;
272
+
273
+ }
274
+
275
+
276
+
277
+ footer i {
278
+
279
+ margin-left: 20px;
280
+
281
+ }
272
282
 
273
283
 
274
284