クイズの選択肢が親要素からはみ出てしまう

前提・実現したいこと

bootstrapを使用してクイズが始まった時の選択肢(2×2)のボタンを作りたいのですが、画像のように選択肢(class="answer")が親要素（class="container mt-5 py-5 px-0"）からはみ出てしまいます。画像の上の問題文は親要素にぴったり収まっているのに何故でしょうか。調べても原因がわからなかった為改善策をお願いします。
選択肢の親要素（class="row fixed-bottom"）にposition:abusoluteも設定しているのですが、それでもはみ出ます。
![

該当のソースコード

HTML
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18
19  <<!-- CSS only -->
20<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
21
22  <meta name="theme-color" content="#fafafa">
23</head>
24<body>
25
26  <style>
27
28      .container{
29        margin-right: auto;
30        margin-left: auto;
31        max-width: 700px;
32
33        background-image:url(haikei.png);
34        background-size:cover;
35        background-position:center center;
36        background-repeat: no-repeat;
37        object-fit: cover;
38        position: relative;
39      }
40
41      .question{
42        text-align:center;
43        position:absolute;
44        border: solid 2px gray;
45      }
46
47      .fixed-bottom{
48        position:absolute;
49        text-align:center;
50      }
51
52      .answer{
53        border: solid 2px gray;
54      }
55
56      .smile{
57        position: absolute;
58        animation:
59        name1 3s step-end 0s infinite normal;
60        z-index: 2;
61      }
62
63      .sleep{
64        position: absolute;
65        z-index: 1;
66      }
67
68      @keyframes name1{
69        0%{ opacity:1; }
70        
71        35%{ opacity:0; }
72
73        40%{ opacity:1; }
74
75        80%{ opacity:0; }
76
77        85%{ opacity:1; }
78
79        95%{ opacity:0; }
80
81        100%{ opacity:1; }
82      }
83      
84    </style>
85
86<div class="p-4">
87</div><!---- space -->
88
89   <div id="top"class="container mt-5 py-5 px-0">
90
91   <div class="row justify-content-center">
92      <div class="question fixed-top">問題文</div>
93    </div><!---- question -->
94
95   <div class="row flex-column d-flex align-items-center justify-content-center">
96      <h1 class="col-3 text-center mb-5">クイズ</h1>
97      <button type="button" class="col-2 btn btn-primary mb-3 w-25">初級</button>
98      <button type="button" class="col-2 ml-1 btn btn-primary mb-3 w-25">中級</button>
99      <button type="button" class="col-2 ml-1 btn btn-primary mb-3 w-25">上級</button>
100      <button type="button" class="col-2 ml-1 btn btn-primary w-25">冥府級</button>
101   </div> <!---- difficulty level -->
102
103   <div class="row fixed-bottom flex-row row-cols-2 justify-content-center">
104    <div type="button" class="answer col py-2  px-0">選択肢１</div>
105    <div type="button" class="answer col py-2  px-0">選択肢２</div>
106    <div type="button" class="answer col py-2  px-0">選択肢３</div>
107    <div type="button" class="answer col py-2  px-0">選択肢４</div>
108  </div> <!---- answer -->
109
110      <img class="smile position-absolute bottom-0 start-0"  src="smile.png" alt="">
111
112      <img class="sleep position-absolute bottom-0 start-0"  src="sleep.png" alt="">
113
114  </div><!---- container -->
115</body>

試したこと

・親要素（背景）にbox-sizing:border-box;box-sizing:border-box;を設定　効果なし
・answerの親要素にw-100を設定画像のように余白ができる

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

回答1件

ベストアンサー

とりあえず.fixed-bottomのposition:absolute;をやめれば良くないですか。
意図がちょっとわかりかねますが。

まず.fixed-bottomに

CSS
1.fixed-bottom{
2        bottom: 0;
3        margin: 0;
4}

を追加します。これで.containerの下部に配置されます。

.fixed-bottomが初級～冥府級のボタンとかぶってしまうかもですが、それは.containerの高さが足りないからなので、別途調整してください。

投稿2021/08/29 09:10

編集2021/08/29 09:53

itagagaki

総合スコア8402

bob-kitchin

2021/08/29 09:29 編集

回答ありがとうございます。言葉足らずで申し訳ありません。選択肢の幅を画像上の問題文と同じように、背景の親要素にぴったり収めたいというのが目的です。 postion:abusoluteを消してしまうと以下の画像のように背景ではなく画面全体の下に選択肢が配置されてしまいます。 https://dotup.org/uploda/dotup.org2575386.png

itagagaki

2021/08/29 09:53

回答を足しました。ご確認ください。

bob-kitchin

2021/08/29 10:28

ありがとうございます、背景にぴったり収めることができました。申し訳ありませんが、もう一点だけ質問してもよろしいでしょうか。選択肢が背景に収まったのは、選択肢に自動で設定されていたmarginを０にリセットしたからですよね。何故問題文はmarginを０にしていないのに背景にぴったり収まったのでしょうか。

itagagaki

2021/08/29 10:34

わかりませんが、ブラウザのデフォルトでそうなっていたのでは？読み込んでいるbootstrap.min.cssが何かしている可能性もありますね。

bob-kitchin

2021/08/29 10:48

bootstrapの影響の可能性もあるのですね。ありがとうございました。

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