クリスタ初級　どうしてこの数字になるのかわかりません（コード中に質問箇所あります）

前提・実現したいこと

コード中にある【質問1～4】についてお聞きしたいです。
一度目にコーディングしたときは大体の見た目はできていたのですが、解答をみて自分のコードになかった部分や異なる数値になっていたところに訂正を加えていくと「どこからこの数値はきたんだ？」というものがいくつか見つかりました。

一応見た目が大体あっていればオッケーとのことですが、現場に出たときに正しい数値をどこから見るのか、計算して出すものなのか知っていないと不安だなとおもうので、できることならこの疑問を解消しておきたいです。

※一部レイアウト崩れに関しての質問はまた別途でスレ立てしますのでお気になさらず。

質問一覧

メインビジュアル　＞　【質問1】どこから90を導いてきたのか*/
メインビジュアル　＞　.kv-copy > /【質問2】なぜフォントサイズ5rem/
お問い合わせ　　　＞　　.btn > /【質問3】どこから30pxがでてきたのか　border-radius: 51px;ではないのか/
/【質問4】なんとなく数値が近いのはわかるけどなぜ20/

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <link rel="stylesheet" href="css/responsive.css">
10 <title>模写テイク2</title>
11</head>
12
13<body>
14 <header class="header">
15
16  <h1 class="site-title"><a href="./">クリ★スタ</a></h1>
17  <!--   <a href="#" class="header-title">クリ★スタ</a>-->
18  <div class="nav-wrapper">
19   <nav class="header-nav">
20    <ul class="nav-list">
21     <!--    href のなかの書き方-->
22     <li class="nav-item"><a href="#about">About</a></li>
23     <li class="nav-item"><a href="#blog">Service</a></li>
24     <li class="nav-item"><a href="#access">Contents</a></li>
25    </ul>
26   </nav>
27
28  </div>
29  <!--  全然かけなかったボタン-->
30  <button class="burger-btn">
31   <span class="fa-bars">
32    <span class="bar bar-top"></span>
33    <span class="bar bar-mid"></span>
34    <span class="bar bar-button"></span>
35   </span>
36  </button>
37 </header>
38 <main>
39  <div class="main-visial">
40   <h1 class="kv-copy">Cresta.design</h1>
41  </div>
42
43
44
45  <!-- アバウト-->
46  <section class="about section-wrapper">
47   <h2 class="section-title">About</h2>
48   <h3 class="sub-title">ミニマルで<br>洗練されたデザインを。</h3>
49   <p class="section-text">近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p>
50  </section>
51
52  <!-- サービス-->
53  <section class="service section-wrapper">
54   <h2 class="section-title">Service</h2>
55   <div class="content-wrapper">
56    <div class="content-item">
57     <div class="content-img"><img src="img/service-image@2x.jpg" alt="一眼レフ"></div>
58     <div class="content-text-section">
59      <h3 class="sub-title">リリース時のサポートで<br>サービスのブランディングを</h3>
60      <p class="content-text">弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
61     </div>
62    </div>
63    <div class="content-item reverse">
64     <div class="content-img"><img src="img/service-image02@2x.jpg" alt="アイフォン"></div>
65     <div class="content-text-section">
66      <h3 class="sub-title">リリース後のサポートで<br>効果を最大化させる</h3>
67      <p class="content-text">弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
68     </div>
69    </div>
70   </div>
71  </section>
72  <!--ニュース-->
73  <section class="news section-wrapper">
74   <h2 class="section-title">Contents</h2>
75   <div class="news-list">
76    <div class="news-card">
77     <div class="news-img"><img class="card-img" src="img/card-image1@2x.jpg" alt="アイフォン"></div>
78     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
79    </div>
80    <div class="news-card">
81     <div class="news-img"><img class="card-img" src="img/card-image2@2x.jpg" alt="アイフォン"></div>
82     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
83    </div>
84    <div class="news-card">
85     <div class="news-img"><img class="card-img" src="img/card-image3@2x.jpg" alt="アイフォン"></div>
86     <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
87    </div>
88   </div>
89  </section>
90  <!-- お問い合わせ-->
91
92  <div class="section-wrapper">
93   <section class="contact-wrapper">
94    <h2 class="contact-title">お問い合わせ</h2>
95    <ul class="contact-list">
96     <li class="contact-form mei">
97      <p>担当者名</p><input type="text">
98     </li>
99     <li class="contact-form tel">
100      <p>電話番号</p><input type="tel">
101     </li>
102     <li class="contact-form mail">
103      <p>メールアドレス</p><input type="email">
104     </li>
105     <li class="contact-form mail">
106      <p>お問い合わせ内容</p><textarea></textarea>
107     </li>
108    </ul>
109    <input class="btn" type="submit" value="送信">
110   </section>
111  </div>
112 </main>
113 <footer>
114  <small> ©︎crest.design all rights reserved</small>
115
116 </footer>
117</body>
118
119</html>
120

該当のソースコード

CSS
1@charset "UTF-8";
2/*ヘッダーフッター送信ボタン*/
3/*ニュースの枠線など*/
4/*共通レイアウト*/
5/*html {
6 font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif;
7 font-size: 0.8rem;
8 /*letter-spacing: 30px;*/
9/* color: $text-black;*/
10html {
11  font-size: 62.5%;
12  /*フォントサイズを簡潔に計算しやすくするため*/
13}
14html body {
15  color: #141414;
16  font-size: 1.4rem;
17  line-height: 1.8;
18  letter-spacing: 0.05em;
19  /*変換表でXDの「0.7px」を変換した0.043の四捨五入*/
20  /*和文フォントの目安高さ*/
21  /*  .wrapper {
22   margin: 0 auto;
23   padding: 0 10% 20px;
24   text-align: center;
25  }*/
26}
27html body img {
28  max-width: 100%;
29  vertical-align: bottom;
30}
31html body a {
32  text-decoration: none;
33  color: #FFFFFF;
34}
35html body .section-title {
36  font-size: 3.6rem;
37  font-weight: bold;
38  margin-top: 150px;
39  margin-bottom: 70px;
40  letter-spacing: 0.05em;
41  /*（文字間「1.8」÷フォントサイズ「36px」）=0.05em*/
42  text-align: center;
43  /*まん中に寄せる*/
44}
45html body h3 {
46  font-weight: bold;
47  letter-spacing: 0.1em;
48  /*文字間「2.4」÷フォントサイズ「24」=0.1em*/
49  margin-bottom: 40px;
50  font-size: 2.4rem;
51}
52html body .section-wrapper {
53  padding: 100px 10% 50px;
54}
55
56/*ヘッダー*/
57header {
58  background-color: #1B1310;
59  border-bottom: 1px solid #FFFFFF;
60  line-height: 74px;
61  display: flex;
62  justify-content: space-between;
63  align-items: center;
64  padding: 0 120px;
65}
66header .nav-list {
67  display: flex;
68}
69header .nav-list .nav-item {
70  /*margin-left: 55px;*/
71  margin-right: 55px;
72  /*margin-rightの分だけ左に寄ってしまうからmargin-leftで余白を作るようにする*/
73}
74header .nav-list .nav-item:last-of-type {
75  padding-right: 0;
76}
77header .burger-btn {
78  display: none;
79}
80
81/*メインビジュアル*/
82.main-visial {
83  height: 90vh;
84  /*ビューポートの高さを基準にした高さ　【質問1】どこから90を導いてきたのか*/
85  background-image: url(../img/fv-bgi@2x.jpg);
86  background-size: cover;
87  background-position: center;
88  /*padding: 300px 0;*/
89  display: flex;
90  /*写真と同じ幅いっぱいに伸びていた枠線が指定した幅になる*/
91  justify-content: center;
92  /*ど真ん中に配置*/
93  align-items: center;
94  flex-direction: column;
95}
96.main-visial .kv-copy {
97  color: #FFFFFF;
98  border: 2px solid #FFFFFF;
99  /* text-align: center;*/
100  font-size: 5rem;
101  /*【質問2】なぜフォントサイズ5rem*/
102  font-weight: bold;
103  padding: 34px 42px;
104  /*枠内部の余白*/
105}
106
107/*アバウト*/
108.about {
109  text-align: left;
110  display: inline-block;
111}
112/*サービス*/
113.content-text-section,
114.content-img {
115  width: 480px;
116  /*画像とテキストの幅が480になる*/
117}
118
119.content-item {
120  display: flex;
121  align-items: center;
122  /*写真の高さでまんなかにする*/
123  justify-content: space-between;
124  /*めいっぱいに広がる*/
125  flex-wrap: wrap;
126}
127.content-item .content-text-section1 {
128  padding-left: 0.7rem;
129}
130
131.reverse {
132  flex-direction: row-reverse;
133  /*二つ目の要素のみ逆転する*/
134  margin-top: 70px;
135}
136.reverse .content-text-section {
137  padding-right: 70px;
138}
139
140/*ニュース*/
141.news .news-list {
142  display: flex;
143  justify-content: center;
144}
145.news .news-list .news-card {
146  box-shadow: 0 0 6px #1B131066;
147  width: 320px;
148  margin-right: 35px;
149}
150.news .news-list .news-card .news-text {
151  width: 255px;
152  text-align: center;
153  line-height: 25px;
154  margin: 25px auto;
155}
156.news .news-list .news-card:last-of-type {
157  padding-right: 0;
158}
159
160/*お問い合わせ*/
161.contact-wrapper {
162  /*display: inline-block;*/
163  /*フォームのマックスの長さ*/
164  margin: 0 auto;
165  /*ボタン*/
166}
167.contact-wrapper .contact-title {
168  font-size: 24px;
169  font-weight: bold;
170  margin-top: 150px;
171  margin-bottom: 72px;
172}
173.contact-wrapper .contact-list {
174  max-width: 700px;
175}
176.contact-wrapper .contact-list .contact-form {
177  width: 100%;
178  margin: 0 auto;
179}
180.contact-wrapper .contact-list .contact-form p {
181  text-align: left;
182}
183.contact-wrapper .btn {
184  background-color: #1B1310;
185  color: #FFFFFF;
186  font-size: 2rem;
187  /*フォントサイズはrem*/
188  /*【質問3】どこから30pxがでてきたのか　border-radius: 51px;ではないのか*/
189  border-radius: 30px;
190  font-weight: bold;
191  /*フォント太く*/
192  /* margin: 50px;*/
193  width: 235px;
194  /*ボタンの幅をつくる*/
195  box-shadow: 0px 0px 6px #1B1310;
196  /*ボタンのうっすらとしたかげ*/
197  /*padding: 20px 97px;*/
198  /*【質問4】なんとなく数値が近いのはわかるけどなぜ20*/
199  /*padding: 16px 97px; ではないのか*/
200}
201
202/*フッター*/
203footer {
204  background-color: #1B1310;
205  /*padding: 29px auto;*/
206  height: 80px;
207  /*フッターの高さをつくる*/
208}
209footer small {
210  color: #FFFFFF;
211  display: block;
212  /*インラインじゃなくてブロック*/
213  text-align: center;
214  /*line-height: 30px;*/
215  /*font-size: 14px;*/
216  padding-top: 30px;
217  /*上に余白を作ることでまんなかになる*/
218}
219
220/**/
221

試したこと

XDでもう一度そのあたりを確認してみたり、解答との指定個所にずれがないのかを確認くらいはしましたが、あとは特に何もできることを見つけられませんでした????
（人にも聞いてみましたが解答を参考にしている方はいないのでわかりませんでした）
ちなみになぜ○○remになるかに関しては、XDでわかるpxなどを変換してみただけ？という点に関しては変換サイトをつかって調べ済みです。