I am currently in the process of creating a dice using the bootstrap grid system. Although I have not completed it yet, here is a small snippet of the code that showcases my progress. However, when I inspect my webpage using developer tools (see attached image), the container-fluid div, which encompasses all of my code, isn't appearing to contain the box divs. Can you help me understand why this might be happening? Below are links to both my HTML and CSS code.
body {
background-color: rgb(41, 36, 36);
text-align: center;
font-family: 'Bungee Spice', cursive;
margin: auto;
}
h2 {
margin-bottom: 10%;
margin-top: 10%;
}
.result {
font-size: 500%;
margin: 5% auto;
}
.box {
width: 60%;
height: 180%;
/* padding-bottom: 60%; */
background-color: yellow;
margin: auto;
border-radius: 10%;
}
.container-fluid {
margin-bottom: 5%;
}
/* .circle1 {
background-color: black;
width: 100%;
height: 100%;
border-radius: 50%;
} */
/* .box-row {
width: 100%;
padding-bottom: 10%;
margin: auto;
background-color: red;
} */
@media (max-width: 1300px) {
.result {
font-size: 400%;
}
}
@media (max-width: 1100px) {
.result {
font-size: 300%;
}
}
@media (max-width: 991px) {
button {
display: block;
}
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999ecf7ebf7e8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726e726d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
<h1 class="result">Welcome, <span class="playerName"></span></h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"></div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>You</h2>
<div class="box">
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>Computer</h2>
<div class="box">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3"></div>
</div>
</div>
<button type="button" class="btn btn-outline-warning">Roll</button>