左右のpadding指定で円が崩れる

スマホ用のページを作成しています
左右にpaddingを指定すると.tokuten-title-spの円が崩れてしまいます
paddingを削除してtokuten-wrapper-spにwidth:80%;と設定しなおしてみましたがそれでも同じことが起こりました　どうしても原因がわからないので、ご回答お願いいたします

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  </head>
8
9  </div>
10  <body>
11<div class="present">
12         <h3><i class="fas fa-gift gift-icon"></i>iSara受講生への参加特典</h3>
13         <p class="present-p"><span>講座費用258,000円以上の金額が稼げるまでの<br class="step-123-h2-br">「永久サポート延長」</span>を追加します。<br class="step-123-h2-br">つまり、<span>実質０円です。</span></p>
14         <div class="present-wrapper">
15           <h2>iSaraは『実質０円』！更なる特典もあり<br>ます。</h2>
16           <div class="tokuten-wrapper">
17             <div class="tokuten">
18               <p class="tokuten-title">特典１</p>
19               <p class="tokuten-naiyou">講座費用258,000円以上の金額が稼げるまで、「永久サポート延長」。リスク０で参加できます。</p>
20             </div>
21
22             <div class="tokuten">
23               <p class="tokuten-title">特典２</p>
24               <p class="tokuten-naiyou">iSaraフリーランスコミュニティ参加権利。案件の紹介や、新施設OPENの際の優先利用権が受けられます。</p>
25             </div>
26
27             <div class="tokuten">
28               <p class="tokuten-title">特典３</p>
29               <p class="tokuten-naiyou">講座参加後のシェアハウス利用権利（ドンムアン空港至近のため、とても便利です）</p>
30             </div>
31           </div>
32
33           <div class="tokuten-wrapper-sp">
34             <div class="tokuten-sp">
35               <p class="tokuten-title-sp">特典１</p>
36               <p class="tokuten-naiyou-sp">参加費以上の金額が稼げるまで「永久サポート」参加費用は実質0円です。</p>
37             </div>
38
39             <div class="tokuten-sp">
40               <p class="tokuten-title-sp">特典２</p>
41               <p class="tokuten-naiyou-sp">フリーランスエンジニアになる為の動画講義を無料プレゼント</p>
42             </div>
43
44             <div class="tokuten-sp">
45               <p class="tokuten-title-sp">特典３</p>
46               <p class="tokuten-naiyou-sp">フリーランス講師による個別コンサル（渡航前の週１回）</p>
47             </div>
48           </div>
49
50         </div>
51       </div>
52</body>
53

CSS
1.present{background-color:#F7C23C; text-align:center; padding:60px 4% 40px;}
2 .gift-icon{font-size:1.4rem;}
3 .present h3{font-size:1.8rem; color:#333; letter-spacing:2px; margin-bottom:50px;}
4 .present-p{font-weight:bold; color:black; letter-spacing:2px; color:#333; margin-bottom:145px;}
5 .present span{color:#fff;}
6 .present-wrapper{width:100%; padding-top:50px; padding-bottom:60px; border:solid 2px #fff;  margin:0 auto;
7 position:relative; }
8 .present-wrapper h2{font-size:1.8rem; color:#333; font-weight:bold; letter-spacing:1px;
9  line-height:1.5; display:inline-block;
10 position:absolute; top:-70px; left:50%; transform: translateX(-50%); background-color:#F7C23C;}
11.tokuten-wrapper{display:flex; justify-content:center; }
12.tokuten{background-color:#fff; width:250px; height:250px; border-radius:50%; padding:55px 15px 20px;
13margin:0px 61px;}
14.tokuten-title{color:#EBB94D; font-size:1.5rem; margin-bottom:20px;}
15.tokuten-naiyou{font-weight: bold; color:#333; font-size:0.9rem; letter-spacing:1px; line-height:1.5;}
16.tokuten-wrapper-sp{display:none;}
17
18
19@media(max-width:768px){.present{text-align:center; padding:25px 4% 20px;}
20.gift-icon{font-size:1rem;}
21.present h3{font-size:1.1rem; color:#333; letter-spacing:2px; margin-bottom:30px;}
22.present-p{font-size:0.75rem; margin-bottom:80px; line-height: 1.5;}
23.present span{color:#fff;}
24.present-wrapper{width:100%; padding-top:50px; padding-bottom:60px; border:solid 2px #fff;  margin:0 auto;
25position:relative; }
26.present-wrapper br{display:none;}
27.present-wrapper h2{font-size:1.1rem; color:#333; font-weight:bold; letter-spacing:1px;
28 line-height:1.5; display:inline-block;
29position:absolute; top:-30px; left:50%; transform: translateX(-50%); background-color:#F7C23C;}
30.tokuten-wrapper{display: none;}
31.tokuten-wrapper-sp{display:block; padding:0 30px 0 65px ;}
32.tokuten-sp{margin-bottom:25px; display:flex;}
33.tokuten-title-sp{ width:60px; height:60px; background-color:#fff; border-radius:50%;
34color:#F7C23C; font-weight:bold; font-size:0.8rem; margin-right:25px; line-height:60px;
35}
36.tokuten-naiyou-sp{font-size:0.8rem; font-weight:bold; color:#fff; text-align: initial;}
37}

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

回答1件

ベストアンサー

.tokuten-title-spの円が崩れてしまいます

崩れるというのは、楕円になってしまう、ということですよね?

原因の1つは、flexアイテムの幅がshrinkしてしまう点です。flex-shrink: 0を指定すれば改善すると思います。

もう1つ、box-sizingがデフォルト(content-box)のままなので、border-boxに変えた方が良いと思います。そうすれば、幅と高さの250pxという指定が、「パディング込みのサイズ」と解釈されるので、padding値を変えてもボックス境界は正方形をキープできます(つまり真円になる)。

投稿2021/03/07 16:27