googleマップを中央寄せにしたい（レスポンシブの中間サイズ時）

実現したいこと

googleマップを中央寄せにしたい

発生している問題・分からないこと

中間サイズ時にgoogleマップが飛び出ているため、レイアウト崩れを起こしている

該当のソースコード

html
1      <div class="features_01">
2        <p class="number_4">04.</p>
3        <p class="number_text_4">アクセス便利な<span>東京駅から徒歩3分</span></p>
4      </div>
5      <div class="google_map">
6        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333702.458953422!2d135.15940806994348!3d35.31669416763537!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6003df779367687b%3A0x646b6aca88356584!2z5pel6YeO6aeF!5e0!3m2!1sja!2sjp!4v1714325919299!5m2!1sja!2sjp" width="1148" height="482" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
7        <p>JR東京駅丸の内地下中央口改札から出て徒歩3分。<br class="access_sp_br">雨の日でも濡れずにお越しいただくことができます。</p>
8        <div class="access_text">東京都中央区丸の内△-△△-△△ ◎◎◎◎◎◎ビル16階 </div>
9      </div>
10

css
1.number_4 {
2  font-family: "Noto Serif JP";
3  font-size: 47px;
4  color: #606060;
5  text-align: center;
6  margin-top: 36.5px;
7  margin-left: 0px;
8}
9@media screen and (max-width: 767px) {
10.number_4 {
11  margin-bottom: 9px;
12}
13}
14
15.number_text_4 {
16  font-family: "Noto Serif JP";
17  font-size: 36px;
18  text-align: center;
19  color: #606060;
20  margin-left: 1px;
21}
22@media screen and (max-width: 767px) {
23  .number_text_4 {
24    font-size: 32px;
25    margin-right: 3px;
26    letter-spacing: .3px;
27    line-height: 1.32;
28}
29}
30
31.number_text_4 span {
32  background-color: #b5e9ee;
33  display: inline-flex;
34  height: 33px;
35  align-items: flex-start;
36  line-height: 30px;
37  width: 308px;
38  margin-top: 18px;
39}
40@media screen and (max-width: 767px) {
41.number_text_4 span {
42  height: 32px;
43  line-height: 29px;
44  width: 277px;
45  margin: 0;
46}
47}
48
49iframe {
50  text-align: center;
51  margin: 36px 110px 0;
52}
53@media screen and (max-width: 767px) {
54iframe {
55  width: 352px;
56  height: 251px;
57  text-align: center;
58  margin: 0;
59}
60}
61@media screen and (max-width: 767px) {
62  .google_map {
63    width: 352px;
64    margin: 39px auto 0;
65}
66}
67
68.google_map p {
69  text-align: center;
70  margin-top: 10px;
71  margin-left: 5px;
72}
73@media screen and (max-width: 767px) {
74  .google_map p {
75    font-size: 12px;
76    margin-left: 8px;
77    line-height: 1.77;
78    margin-top: 7.5px;
79}
80}
81
82.access_text {
83  font-size: 24px;
84  text-align: center;
85  margin-top: 19px;
86  margin-left: 30px;
87}
88@media screen and (max-width: 767px) {
89  .access_text {
90    font-size: 18px;
91    text-align: center;
92    margin-top: 18px;
93    margin-left: 0;
94    line-height: 1.7;
95}
96}
97
98@media screen and (min-width: 768px) {
99.access_sp_br {
100  display: none;
101}
102}
103

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

調べて試しましたが分かりませんでした。

補足

特になし

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

回答1件

html
1        <iframe
2            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333702.458953422!2d135.15940806994348!3d35.31669416763537!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6003df779367687b%3A0x646b6aca88356584!2z5pel6YeO6aeF!5e0!3m2!1sja!2sjp!4v1714325919299!5m2!1sja!2sjp"
3            width="1148" height="482" style="border:0;" allowfullscreen="" loading="lazy"
4            referrerpolicy="no-referrer-when-downgrade"></iframe>