改行を思い通りにしたい。

改行を思い通りにしたい。（模写しています）

添付画像のようにしたいです。

簡単な表示
試したこと
⓵
html
<h2 class="wrap1heading">
お部屋に飾りやすいサイズの<br>ブーケをワンコインで
</h2>
css

⓶
html

<h2 class="wrap1heading"> <span class="wrap1text">お部屋に飾りやすいサイズの<br></span> <span class="wrap1text">ブーケをワンコインで</span> </h2>

css
.wrap1heading{
display: inline-block;
text-align: center;
}
.wrap1text{
display: inline-block;
}

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10
11    <link rel="stylesheet" href="css/normalize.css">
12    <link rel="stylesheet" href="css/flower.css" type="text/css">
13
14
15    <title>練習 FLOWER｜かわいいが届くお花便</title>
16
17    <meta name="description" content="あなた好みのお花がポストに届く定期便アプリ">
18    
19
20  </head>
21  <body>
22  	<header>
23  		<div class="header">
24         
25          <div class="logo2"></div>
26          <div class="tagline">かわいいが届くお花便</div>
27       
28
29          <div class="badges">
30            <a class="app-badge" href="https://apps.apple.com/jp/app/flower-%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84%E3%81%8C%E5%B1%8A%E3%81%8F%E3%81%8A%E8%8A%B1%E4%BE%BF/id1434272434?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2019-02-18&kind=iossoftware&bubble=ios_apps) no-repeat;width:164px;height:40px;"></a>
31            <a    href='https://play.google.com/store/apps/details?id=co.rollcake.flower&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img class="googleplay-badge" style='margin-top:-32px;' alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png'/></a>
32          </div>
33
34          <p>*北海道、沖縄、離島エリアは現在対象外です</p>
35        </div>
36
37  	</header>
38    <body>
39      
40     <div class="service">
41      <div class="container"></div>
42        <div class="group">
43          <div class="item item1">
44            <h2>届くのは<br>あなた好みのお花だけ</h2>
45            <p>FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。</p>
46          </div>
47          <div class="item item2">
48                    <h2>お花はポストに投函<br>忙しくても大丈夫</h2>
49                    <p>お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。</p>
50          </div>
51          <div class="item item3">
52                    <h2>FLOWERなら<br>いつもかわいく飾れる</h2>
53                    <p>専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。</p>
54          </div>
55      </div>
56    </div> 
57
58    <div class="price">
59
60      <div class="wrap wrap1">
61        <h2 class="wrap1heading">
62          <span class="wrap1text">お部屋に飾りやすいサイズの</span>
63          <span class="wrap1text">ブーケをワンコインで</span>
64        </h2>
65      </div>
66
67      <div class="wrap wrap2">
68        <p class="paragraph1">お花とグリーン5～6ほんのブーケ</p>
69        <p class="paragraph2"><span>500円</span>/1回</p>
70      </div>
71      <div class="wrap wrap3">
72        <ul>
73          <li>*送料は360円（税別）です。</li>
74          <li>*価格は税別です。</li>
75        </ul>
76      </div>
77    </div>
78
79      </body>
80
81
82    
83
84    <!-- Optional JavaScript -->
85    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
86    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
87    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
88    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
89  </body>
90</html>

css
1html,body{
2	height:100%;
3}
4
5html{
6	    font-size: 62.5%;
7	    box-sizing: border-box;
8}
9
10.header{
11	max-width: 100%;
12 	text-align: center;
13 	position: relative;
14 	background-image: url(../images/no2.png);
15 	width: 100%;
16    height: 100vh;
17	background-size: cover;
18	display: flex;
19	justify-content: center;
20
21}
22.logo2{
23	background-image: url(../images/f2.png);
24	position: absolute;
25	top: 20%;
26	left: 0;
27	right: 0;
28	margin: auto;
29	background-size: contain;
30	background-repeat: no-repeat;
31	background-position: center;
32	width:16%;
33	height: 16%;	
34}
35
36
37.tagline{
38	position: absolute;
39	top: 39%;
40	left: 0;
41	right: 0;
42	margin: auto;
43	color: white;
44	font-size: 1.3rem;
45}
46
47
48.badges{
49	position: absolute;
50	top:80%;
51	left: 0;
52	right: 0;
53	margin: auto;
54}
55
56.app-badge {
57	
58	margin-right: 10px;
59}
60
61
62.googleplay-badge{
63	
64	margin-right: 16px;
65	width: 164px;
66	height: 60px;
67
68
69}
70
71.header p{
72	position: absolute;
73	top:91%;
74	left: 0;
75	right: 0;
76	margin: auto;
77	font-size: 1.7vh;
78	color: white;
79}
80
81
82.logo2,
83.tagline,
84.badges,
85.app-badge,
86.googleplay-badge,
87.header p
88{
89	 opacity:0;
90	 animation-name: fade-in;
91	 animation-duration:  2s;
92	 animation-iteration-count: 1;
93	 animation-fill-mode: forwards;
94}
95
96@keyframes fade-in{
97	0%{
98		opacity:0;
99		transform: translateY(30px);
100	}
101	100%{
102		opacity: 1;
103		transform: translateY(0);
104	}
105}
106
107
108@media screen and (max-width: 768px){
109	.badges{
110		width: 100%;
111		background-color: #F5F2F5;
112		position: fixed;
113		bottom: 0;
114		height: 96px;
115		
116		/*animation: none;*/
117
118	}
119
120}
121
122/* body */
123
124.service,.container{
125	padding: 0;
126	margin: 0;
127    
128}
129.service{
130	
131	box-sizing: inherit;
132}
133.container{
134	
135	/* display: flex;
136	width: 100vw;
137	flex-wrap: wrap;
138	box-sizing: inherit; */
139}
140
141.group {
142  display: flex;
143}
144
145
146.item1{
147	background-image: url(../images/item1.jpg);
148	background-color: rgb(205,190,202);
149	
150	
151}
152
153.item2{
154	background-image: url(../images/item2.jpg);
155	background-color: rgb(178,186,196);
156	
157}
158
159.item3{
160	background-image: url(../images/item3.jpg);
161	background-color: rgb(230,213,177);
162	
163}
164
165.item{
166	background-size: cover;
167	
168	height: 80vh;
169	padding: 50px 40px;
170	font-size: 2.2rem;
171	box-sizing: border-box;
172	background-position: center;
173	color:  #ffffff;
174	flex-grow:1;
175	flex-shrink: 1;
176  	flex-basis: 0%;
177}
178
179@media screen and (max-width: 768px){
180	
181	.group{
182		display: flex;
183		flex-direction: column;
184	}
185 	.item{
186 		min-height: 540px;
187 	}
188
189}
190
191
192/* price */
193
194.price{
195	background-image: url(../images/price-try.png),
196					  url(../images/price.jpg);
197	background-repeat: no-repeat,
198					   no-repeat;
199	background-position: center 20vh,
200						 center;
201	background-size: 124px 37px,
202					 200px 200px;
203	text-align: center;
204	width: 50vw;
205	height: 557px;
206	background-color: #F5F5F5;
207	position: relative;
208}
209
210.wrap{
211	/*display: flex;
212  	justify-content: center;
213  	align-items: center;*/
214	position: absolute;
215	left: 50%;
216	transform: translateX(-50%);
217}
218
219.wrap1{
220	top: 63px;
221	font-size: 20px;
222	line-height: 32px;
223	font-weight: 400;
224
225}
226.wrap1heading{
227	display: inline-block;
228	text-align: center;
229}
230.wrap1text{
231	display: inline-block;
232}
233
234.wrap2{
235	top: 400px;
236
237}
238
239.paragraph1,.paragraph2{
240	font-size: 15px;
241	}
242
243.paragraph2 span{
244	font-size: 20px;
245	font-weight: 700;
246	line-height: 32px;
247	
248}
249
250.wrap3{
251	top: 480px;
252	font-size: 13px;
253	font-weight: 400;
254	line-height: 21px;
255}
256
257.wrap3 ul{
258	list-style: none;
259}
260
261.wrap1,
262.wrap2,
263.wrap3{
264	font-family: "Noto Sans JP",sans-serif;
265	color: #3f434a;
266}

new1roさんより頂いた回答を試した結果。

css（変更したコードのみ）
1
2.wrap{
3	/*display: flex;
4  	justify-content: center;
5  	align-items: center;
6  	*/
7	/*
8	position: absolute;
9	left: 50%;
10	transform: translateX(-50%);
11	*/
12}
13
14.wrap3 ul{
15	list-style: none;
16	padding-left: 0;
17}

根本的にコードを変更する必要があるような内容でしょうか？

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

回答1件

left: 50%;などの記述が不要そうに見えます。
コメントアウトしたほうがよさそうです。

CSS
1.wrap {
2  /*
3  position: absolute;
4  left: 50%;
5  transform: translateX(-50%);
6  */
7}
8
9/* ↑だけだと、ulが中央揃えにならないので以下も追加 */
10/* .wrap ul {  } でもいいかもしれません */
11.wrap3 ul {
12  padding-left: 0;
13}