I have developed a small quiz application where, after answering questions, I display a progress bar. The issue I am facing is with the styling of the progress bar. I have set up two div elements for this purpose - one as the parent element (id = "progressBar") and the other as the child element (id= "progressBarFull"). While applying CSS to the parent div works fine, the CSS applied to the child div is not taking effect. Can someone help me understand why?
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 90%;
font-size: 1.8rem;
border: 0.1rem solid rgb(86, 165, 235,0.25);
background-color: white;
}
.choice-prefix{
background-color: #56a5eb;
padding: 1.5rem 2.5rem;
color: white;
}
.choice-text{
padding: 1.5rem;
width: 100%;
}
.choice-container:hover{
cursor:pointer;
box-shadow: 0.4rem 0.6rem rgba(86, 185, 235, 0.5);
transform: translate(-0.1rem);
transition: transform 150ms;
}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* HUD DISPLAY */
#hud{
display: flex;
justify-content: space-between;
}
.hud-prefix{
text-align: center;
font-size: 2rem;
}
.hud-main-text{
text-align: center;
}
#progressBar{
width : 20rem;
height: 3.1rem;
border: 0.3rem solid #56a5eb;
};
#progressBarFull{
height: 2.5rem;
background-color: #56a5eb;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Quiz - Play</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="game.css" />
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div class="hud-item">
<p id= "progressText"class="hud-prefix">
</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div class="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
</h1>
</div>
</div>
<h2 id="question">What is the answer to this question?</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>