背景画像を余白なく上下左右に表示したいです。

前提・実現したいこと

イメージ画像のように背景画像を上下左右余白なく画面いっぱいにしたい。

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

background-imageを使って背景画像を表示させ、background-size:cover;を使って画面いっぱいに表示したつもりなのですが背景画像の周りに少しだけ余白が出てしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>sanple</title>
9  <link rel="stylesheet" href="stylesheet.css">
10  <link rel="stylesheet" href="responsive.css">
11  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
12
13  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
14</head>
15
16<body>
17  <header>
18    <!-- width900ä»¥ä¸Š -->
19    <div class="header-wrapper">
20      <h1 class="site-logo">
21        <a href="#">sanple</a>
22      </h1>
23      <nav class="navigation">
24        <ul>
25          <li><a href="#">TOP</a></li>
26          <li><a href="#">PRODUCT</a></li>
27          <li><a href="#">ABOUT</a></li>
28          <li><a href="#">NEWS</a></li>
29          <li><a href="#">CONTACT</a></li>
30        </ul>
31      </nav>
32      
33    </div>
34    </header>
35    </body>
36    </html>
37

CSS
1* {
2  box-sizing: border-box;
3}
4
5header {
6  width: 100%;
7  height: 295px;
8  background-image: url("ATOM/æ¨¡å†™/img/budapest-4182585_960_720.jpg");
9  background-size: cover;
10  border-radius: 0 0 90px 90px;
11
12}
13
14.header-wrapper {
15  height: 140px;
16  margin: 0 auto;
17
18}
19
20.site-logo {
21  float: left;
22  margin-left: 7%;
23}
24
25.site-logo a {
26  color: #fff;
27  text-decoration: none;
28}
29.site-logo a:hover{
30  opacity: 0.8;
31}
32.navigation {
33  float: right;
34  margin-top: 75px;
35  margin-right: 7%;
36}
37
38.navigation a {
39  color: #fff;
40  text-decoration: none;
41  letter-spacing: 0.1em;
42  font-size: 14px;
43  padding-bottom: 8px;
44  border-bottom: 2px solid transparent;
45}
46
47.navigation li {
48  display: inline-block;
49  margin-left: 40px;
50}
51
52.navigation a:hover {
53  border-color: #fff;
54  opacity: 1;
55}
56

試したこと

私なりに調べて background-image、background-size: cover;、background-position: center;　を試しましたがどうしても余白が出てしまいます。
私はこれらの学習を始めて１ヶ月程度なので知らない事の方が正直多いです。
基礎的なミスなのかもわかっておりません。お時間がある方に教えていただけますと幸いです。
私の今の状況が下の画像です。

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

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

回答4件

ベストアンサー

Chromeのデフォルトのbodyのmarginは
body { margin: 8px; } なので
body { margin: 0; } を追加すれば直ります。

あと sample が sanple になっていたり
コードの一部が文字化けしているので
これらも修正したほうが良いでしょう。

投稿2019/05/17 04:49

yasutomi

総合スコア2941

body{ margin:0px; }とかするとどうでしょう？
reset.css とか normalize.css とかを使った方がいいのかもしれないですね。

投稿2019/05/17 03:31

Lhankor_Mhy

総合スコア37512

Chromeデベロッパーツールは使っていますか？
使っているのであれば、https://dream-html-seminar.com/chrome_developer_tools/こちらのページを参考に、
①Chromeデベロッパーツールを起動
②「①要素選択ボタン」で該当の余白をクリック
③「④Styles編集」で表示されている要素が余白を作っているので、marginまたはpaddingを修正
で解決できるかと思います。

Chromeデベロッパーツール使っていないようであれば、便利なので使ってみてください(　˙-˙　)y

投稿2019/05/17 04:05