HTML/CSSでボタンがコメントと重なってしまう

HTML/CSS初心者です。
画像のようにメニューのボタンと文章が重なってしまいます。
ちょっとしたことで変えられると思うのですが調べてもよくわかんなかったため質問しました。
よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charsset="utf-8">
5        <title>WCB Cafe</title>
6        <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7
8    <!-- CSS -->
9        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
10        <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
11        <link href="css/style.css" rel="stylesheet">
12    </head>
13
14    <body>
15      <div id="home" class="big-bg">
16        <header class="page-header wrapper">
17          <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
18          <nav>
19            <ul class="main-nav">
20                <li><a href="news.html">News</a></li>
21                <li><a href="menu.html">Menw</a></li>
22                <li><a href="contact.html">Contact</a></li>
23              </ul>
24            </nav>
25        </header>
26
27        <div class="home-content wrapper">
28            <h2 class="page-title">We'll Make Your Day</h2>
29            <p>おしゃれなカフェで癒されてみませんか?無添加の食材で体の中からリフレッシュ。</p>
30            <a class = "button" href="menu.html">メニューを見る</a>
31        </div><!-- /.home-content -->
32      </div><!-- /#home -->
33    </body>
34</html>
35

CSS
1@charset "UTF-8";
2
3/*　共通部分
4--------------------*/
5
6html {
7  font-size: 100%;
8}
9body{
10        font-family:"Yu Gothic Medium", "游ゴシック Medium" YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3", sans-serif;
11    line-height:1.7;
12        color: #432;
13}
14a {
15    text-decoration:none;
16}
17img {
18    max-width: 100%;
19}
20
21/* HEADER
22----------------*/
23
24.logo {
25    width: 210px;
26    margin-top:14px;
27}
28
29.main-nav {
30  display: flex;
31  font-size: 1.25rem;
32  text-transform: uppercase;
33  margin-top: 34px;
34  list-style: none;
35}
36.main-nav li {
37    margin-left: 36px;
38}
39.main-nav a {
40  color: #432;
41}
42.main-nav a:hover {
43    color: #0bd;
44}
45
46.page-header {
47  display: flex;
48  justify-content: space-between;
49}
50
51.wrapper {
52  max-width: 1100px;
53  margin: 0 auto;
54  padding: 0 4%;
55}
56
57/* HOME
58------------------------*/
59
60.home-content {
61  text-align: center;
62  margin-top: 10%;
63}
64.home-content p {
65    font-size: 1.125rem;
66    magin: 10px 0 42px;
67}
68
69/*　見出し */
70.page-title {
71  font-size: 5rem;
72  font-family: "Philosopher", serif;
73  text-transform: uppercase;
74  font-weight: normal;
75}
76
77/*　ボタン */
78.button {
79  top: 100px;
80  font-size: 1.375rem;
81  background: #0bd;
82  color: #fff;
83  border-radius: 5px;
84  padding: 18px 32px;
85}
86.button:hover {
87    background: #0090aa;
88}
89
90/* 大きな画像背景 */
91.big-bg {
92  background-size: cover;
93  background-position: center top;
94}
95
96#home {
97  background-image: url(../images/main-bg.jpg);
98  min-height: 100vh;
99}
100#home .page-title {
101    text-transform: none;
102}
103

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

回答1件

ベストアンサー

タイプミスですね。

css
1.home-content p {
2    font-size: 1.125rem;
3    /* magin: 10px 0 42px; */
4    margin: 10px 0 42px;
5}

投稿2021/12/21 09:21

umau

総合スコア831

Rondon7251

2021/12/21 09:54

全然気づきませんでした。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

HTML/CSSでボタンがコメントと重なってしまう

関連した質問