HTML CSS 画面のサイズに関係なくレイアウトを固定できません

前提・実現したいこと

画面のサイズが変更されてもレイアウトが崩れずに、そのままの画面が大きくしたりり、小さくしたりしたいです

position:'relative'で固定しておりadlessとmoneyとimg以外は画面に対応して変化するのですが、この３つだけ変化しません。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーは特にありません、思うような挙動をしません

該当のソースコード

javascript
1 result: {
2        position: 'relative',
3        top: '100px',
4        border: 'solid 2px',
5        width: '70%',
6        marginLeft: 'auto',
7        marginRight: 'auto',
8    },
9    resultlist: {
10        backgroundColor: '#6495ED',
11        fontSize: '20px',
12        textAlign: 'left',
13    },
14
15    guest: {
16        position: 'relative',
17        fontSize: '20px',
18        top: '-110px',
19        left: '60px',
20    },
21
22    adless: {
23        position: 'relative',
24        top: '-90px',
25        left: '550px',
26        fontSize: '20px',
27        border: 'solid 1px',
28    },
29    money: {
30        position: 'relative',
31        left: '330px',
32        top: '50px',
33        fontSize: '20px',
34        border: 'solid 1px',
35    },
36
37    img: {
38        position: 'relative',
39        width: '200px',
40        height: '200px',
41        right:'440px',
42        marginTop:'30px'
43return(
44<div className={classes.result}>
45       <div className={classes.resultlist}>民宿一覧</div>
46<List>
47  {guesthouseList.map(guesthouse =>
48  <ListItem key={guesthouse.guesthouseNumber} divider={true} className={classes.sen}>
49
50   <Link onClick={()=> history.push(`/Detail/${guesthouse.guesthouseNumber}`)}
51                 className={classes.guest}>
52                   {guesthouse.guesthouseName}
53    </Link>
54
55    <Typography className={classes.adless}>住所　　　{guesthouse.guesthouseAddress}</Typography>
56
57     <Typography className={classes.money}>料金　　　{guesthouse.price}　円</Typography>
58
59     <img className={classes.img} src={`data:image;base64,${guesthouse.image}`}
60                                        alt='写真'
61                                    >
62                                    </img>
63
64                                </ListItem>
65                            )}
66                        </List>
67</div>
68</div>
69)

住所と金額のところが画面サイズに関係なく同じ場所にあり、小さくした場合は右端に大きくすると真ん中にレイアウトされます。２枚目は画像サイズを縮小したレイアウトです。

試したこと

adlessとmoneyの表示されている場所が画面の大きさを変えることでその大きさに合わせた、位置にレイアウトされず、常に固定の位置にあります。
position:relativeをabsoluteにしてみてもダメでした。何か良い方法ございましたら教えてください。
adlessとmoneyのCSSを何かしら変更すれば思い通りの挙動になると個人的には思っておりますが、全く思いつきません。

Lhankor_Mhy

2021/10/04 08:41

CSSの問題だと特定できているのであれば、レンダリングされたHTMLを提示した方が回答がつきやすいかもしれません。

sinzinse1gou

2021/10/04 13:36

CSS内に何か記述をすれば解決するという問題ではないということでしょうか？（例）adless:{margin:50%}などではないということでしょうか？お忙しいところ申し訳無いのですが、ご回答いただけると非常に助かります。よろしくお願いします。

Lhankor_Mhy

2021/10/05 01:00

いえ、「CSS内に何か記述をすれば解決する」ということはつまり、CSSの問題だと特定できているということだと思います。そうであれば、レンダリングされたHTMLを提示した方が回答がつきやすいのではないかな、というコメントです。なぜならば、コンポーネントがどのようなHTMLに展開されるのかがわからないからです。

sinzinse1gou

2021/10/05 01:58

アドバイスありがとうございます。写真を記載できるのですね、レイアウトを記載した方が視覚的に分かりやすいですね。今後活用させていただきます