画像の右に余白ができる

実現したいこと

全体をmax-width　1180pxを指定して写真をposition-absoluteで絶対配置してます。
imgを囲んだfigureにright: auto;と指定するも右側に謎の余白ができてしまいます。

該当のソースコード

HTML
1<section class="under __reverce">
2                <div class="under__inner">
3                    <div class="under__body">
4                        <h3 class="under__title">庭園付き客室</h3>
5                        <p class="under__text">庭園付きの客室になります。<br class="blank">お庭を見ながら、ほっとするひとときをお過ごしください。</p>
6                        <p class="under__atention">
7                            <span>＊お庭は複数のお客様と囲む形になります。</span>
8                            <span>＊部屋数に限りがあります。</span>
9                            <span>＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。</span>
10                        </p><!-- /.under__atention -->
11                    </div>
12                    <figure class="under__ph">
13                        <img src="img/oheya02.jpg" alt="和室の縁側から日本庭園を一望できます。" width="525" height="300">
14                    </figure>
15                </div><!-- /.under__inner -->
16            </section>
17

scss
1//写真つきセクション
2.under {
3    margin-left: auto;
4    margin-right: auto;
5    padding: 80px 20px;
6
7}
8
9.under3 {
10    margin-bottom: 80px;
11}
12
13.under__inner {
14    display: flex;
15    flex-direction: column-reverse;
16
17}
18
19
20
21//写真付きセクションのテキスト
22.under__body {
23    background: url('../../img/bg.png');
24    background-color: gray;
25    padding: 20px;
26    margin: -30px -20px 0 50px;
27}
28
29//写真付きセクション反対バージョン
30.__reverce {
31
32    .under__body {
33        margin: -30px 50px 0 -20px;
34    }
35}
36
37.under__title {
38    font-size: 20px;
39
40}
41
42.under__text {
43    font-size: 14px;
44    line-height: 2;
45    margin-top: 15px;
46
47    .blank {
48        display: none;
49    }
50}
51
52
53.under__atention {
54    font-size: 14px;
55    line-height: 1.5;
56    margin-top: 15px;
57
58    span {
59        display: block;
60    }
61
62}
63
64//写真付きセクションの写真
65.under__ph {
66    margin-left: calc(50% - 50vw);
67
68    img {
69        aspect-ratio: 525 / 300;
70        max-width: 525px;
71        width: 100%;
72        height: auto;
73        object-fit: cover;
74    }
75}
76
77//写真反対バージョン
78.__reverce {
79
80    .under__ph {
81        margin-right: calc(50% - 50vw);
82        margin-left: auto;
83    }
84}
85
86
87@include small {
88    .main__container__txt {
89        .blank {
90            display: block;
91        }
92    }
93
94    .under__text {
95        .blank {
96            display: none;
97        }
98    }
99}
100
101@include medium {
102
103    //写真つきセクション
104    .under {
105        margin-left: auto;
106        margin-right: auto;
107        max-width: 1180px;
108        padding: 0 20px 150px;
109
110
111    }
112
113    .under1 {
114        padding-top: 135px;
115    }
116
117    .under3 {
118        margin-bottom: 0;
119    }
120
121    .under__inner {
122        position: relative;
123        margin-bottom: 0;
124    }
125
126    .main__container__txt {
127        margin: 0;
128    }
129
130    .under__ph {
131        margin: 0;
132        position: absolute;
133        top: -60px;
134        right: 50%;
135        width: 50%;
136
137    }
138
139
140    //写真付きセクションのテキスト
141    .under__body {
142        background: url('../../img/bg.png');
143        padding: 40px 48px 60px 194px;
144        margin: 0 0 0 auto;
145        width: 68%;
146    }
147
148    .under__title {
149        font-size: 24px;
150
151    }
152
153    .under__text {
154        font-size: 16px;
155        margin-top: 52px;
156
157        .blank {
158            display: block;
159        }
160    }
161
162    .under__atention {
163        margin-top: 52px;
164
165    }
166
167
168
169    //写真反対バージョン
170    .__reverce {
171        .under__inner {
172            flex-direction: column;
173
174        }
175
176        .under__ph {
177            right: auto;
178            left: 50%;
179        }
180
181        .under__body {
182            padding: 40px 195px 60px 48px;
183            margin: 0 auto 0 0;
184        }
185
186    }
187}
188
189@include large {
190
191    //写真付きセクションのテキスト
192    .under__body {
193        padding: 60px 68px 110px 244px;
194        width: 100%;
195        max-width: 800px;
196    }
197
198    //写真反対バージョン
199    .__reverce {
200
201        .under__body {
202            padding: 60px 295px 89px 60px;
203        }
204    }
205}
206
207@include x-large {
208
209    //写真付きセクションのテキスト
210    .under__body {
211        padding: 60px 68px 110px 244px;
212        width: 100%;
213        max-width: 820px;
214    }
215}