SNSアイコンが右にずれている原因解明とセンタリング方法を教えてほしいです[画像あり]

前提・実現したいこと

SNSアイコンの部分を①のように中央に表示させたい

①

現状↓

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

SNSアイコンがどのブラウザでみても中央から右にずれている

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>ACB Barkery</title>
8    
9    <!-- CSS -->
10    <link rel="stylesheet" href="style.css">
11    <link rel="preconnect" href="https://fonts.googleapis.com">
12    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
14    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
15    <script src="https://kit.fontawesome.com/cea33ed16a.js" crossorigin="anonymous"></script>
16  </head>
17
18  <body>
19    <div class="container">
20      <section class="hero">
21        <h1 class="title">WCB Bakery</h1>
22        <p>素材と食感にこだわったパンが勢ぞろい。<br>
23          毎朝仕込んで焼き上げています。<br>
24          パンと一緒に過ごす至福のひとときをお楽しみください。<br>
25        </p>
26      </section>
27
28      <section class="menu">
29        <h2 class="title">Menu</h2>
30        <dl class="menu-list">
31            <div>
32              <dt>・メロンパン</dt>
33              <dd>&yen;220</dd>
34            </div>
35
36            <div>
37              <dt>・メロンパンメロンパンメロンパン</dt>
38              <dd>&yen;220</dd>
39            </div>
40
41            <div>
42              <dt>・メロンパン</dt>
43              <dd>&yen;220</dd>
44            </div>
45
46            <div>
47              <dt>・メロンパン</dt>
48              <dd>&yen;220</dd>
49            </div>
50
51            <div>
52              <dt>・メロンパン</dt>
53              <dd>&yen;220</dd>
54            </div>
55
56            <div>
57              <dt>・メロンパン</dt>
58              <dd>&yen;220</dd>
59            </div>
60
61            <div>
62              <dt>・メロンパン</dt>
63              <dd>&yen;220</dd>
64            </div>
65
66            <div>
67              <dt>・メロンパン</dt>
68              <dd>&yen;220</dd>
69            </div>
70
71            <div>
72              <dt>・メロンパン</dt>
73              <dd>&yen;220</dd>
74            </div>
75        </dl>
76      </section>
77
78      <section class="contact">
79        <h1 class="title">Contact</h1>
80        <p>東京都新宿区市谷左内町00-00<br>
81          営業時間 8:00〜20:00
82        </p>
83
84        <a class="btn" href="#">お問い合わせ</a>
85
86        <ul class="contact-sns">
87          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
88          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
89          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
90        </ul>
91      </section>
92    </div>
93  </body>
94</html>

CSS
1
2section {
3    height: 100vh;
4    background-size: cover;
5    background-repeat: no-repeat;
6    background-position: center center;
7}
8
9.title {
10    font-family: 'Dancing Script', cursive;
11    font-size: 64px;
12    margin-bottom: 20px;
13}
14
15
16
17.hero {
18    background-image: url(img/bread1.jpg);
19    text-align: center;
20    padding-top: 10vh;
21}
22
23
24.menu {
25    background-image: url(img/bread2.jpg);
26    text-align: left;
27    padding: 10vh 0 0 30vh;
28}
29
30dl.menu-list div {
31    display: flex;
32}
33
34.contact {
35    background-image: url(img/cafe.jpg);
36    text-align: center;
37    padding: 10vh;
38}
39
40.btn {
41    border: 1px solid gray;
42    border-radius: 3px;
43    background-color: gray;
44    padding: 3px 24px;
45    color: white;
46    text-decoration: none;
47}
48
49.contact-sns {
50    display: flex;
51    justify-content: center;
52}
53
54.contact-sns a {
55 background : white;
56 width: 24px;
57 height: 24px;
58 display: inline-block;
59 border-radius: 50%;
60 font-size: 16px;
61 color: grey;
62 margin: 4px;
63 padding: 2px 0 0 1px;
64}
65
66.contact-sns a:hover {
67    background: white
68}

試したこと

正直初めての複写コーディングで、どこをどう修正したらいいか分からなかったので、調べなおして一個ずつ改めて打ち込んではページで確認していったくらいです。

どうしてアイコンだけ中央にこないか、お教えいただければと思います。
よろしくお願いいたします。

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

回答1件

ベストアンサー

<ul>のデフォルトのパディングのせいだと思われますので、ul.contact-snsにpadding: 0;を設定してみてください。
それと、写真を見ると<li>のマーカーもデフォルトのまま付いてしまっているようなので、

CSS
1.contact-sns li {
2    list-style: none;
3}

も加えるとよろしいかと思います。

投稿2021/10/07 12:31

itagagaki

総合スコア8402

cha2maru

2021/10/07 13:00 編集

ありがとうございます！キレイに中央揃いにできました！さらにマーカーについてもご指摘いただき、本当にありがとうございます。 ulにてデフォルトで左に余白があることすら想像もしていませんでした… リストを作る際は今後必要そうなので覚えておきます。もしよろしければ、もう一つ疑問が出てしまって、こちらにも回答いただければ幸いです。実はこの模写しているものにお手本のCSSコードがあるのですが(模写する時は自力で出来るようにお手本のコードは見ていないです)、このお手本のコードでは「justify-content: center;」という部分だけでセンタリング出来ているのでしょうか？ ※HTMLの記述は私のと一緒のようです --お手本になっているコードです-------------------- .contact-sns { display: flex; justify-content: center; } .contact-sns a { background: #fff; width: 3.75rem; height: 3.75rem; display: inline-block; margin: 0 .5rem; border-radius: 50%; font-size: 2rem; padding: .75rem 0 0 .125rem; color: #555; } ------------------- なぜ私が書いたコードではわざわざパディング０設定しないといけないのか、お手本ではなぜCSSにて「ul」に対する記述がないのか、という疑問が出てしまい…ぜひともよろしくお願いいたします。

itagagaki

2021/10/07 13:09

その手本のコードは、おそらく * { padding: 0; margin: 0; } などのようなリセットCSSが別途存在しているか、または暗黙の前提にしているのではないかと想像します。

cha2maru

2021/10/07 13:58 編集

再度の回答ありがとうございます。リセットCSSなどについは、ページ全体に変更する記述がおそらく下記の記述かとおもいますが、どれも見てもそのようなものは私には見つけれません… 自分で一個づつ分解して見ていこうとも思っておりますが、もし更にお手間でなければ、いつもで構いませんので下記のコードの中でお分かりになるものがありましたら、お教えいただければ幸いです。初めての質問投稿と複写で不安でしたが、itagagaki様が丁寧に教えてくださり安心し、助かりました。何度も本当にありがとうございます。またの機会がございましたら、よろしくお願いいたします。 --全体に変更をかける部分？----------- /* GENERAL STYLING ================================================ */ html { font-size: 100%; } body { color: #555; font-family: sans-serif; } /* COMMON ================================================ */ .title { font-family: 'Dancing Script', cursive; font-size: 7rem; margin-bottom: 2rem; } p { line-height: 1.7; font-size: 1.125rem; } .container { overflow: auto; scroll-snap-type: y mandatory; height: 100vh; } section { height: 100vh; scroll-snap-align: start; background-size: cover; background-repeat: no-repeat; background-position: center center; } ---------------------------------------

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