I'm currently working on a JavaScript calculator project and I'm using this code snippet from codepen. The issue I'm facing is that despite setting the body background color to black, it still appears white. Could there be a spacing problem causing this unexpected behavior? This is something new for me and I haven't encountered it before :( Any tips on how I can resolve this issue would be greatly appreciated! Thanks in advance...
html, body{
background-color:black;
}
#calcOutput{
width:250px;
height:75px;
border-top-left-radius:2em;
border-top-right-radius:2em;
margin-right:auto;
margin-left:auto;
margin-top:20px;
padding-top:20px;
}
#calculator{
background-color:grey;
width:250px;
padding-top: 20px;
padding-bottom: 30px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
margin-right:auto;
margin-left:auto;
}
#steps{
padding-left:50px;
font-size:2em;
}
.bigButton{
width:93px;
}
a{
margin: 5px;
width: 2.6vw;
height: 2.6vw;
}
<head>
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Calculator</h1>
<h2>JS calculator</h2>
</div>
<div id ="calcOutput">
<span id= "steps">0</span>
<hr/>
</div>
<div class="text-center" id="calculator">
<a class="btn btn-danger" id="deleteAll">AC</a>
<a class="btn btn-danger" id="backOne">CE</a>
<a class="btn btn-primary" id="/">/</a>
<a class="btn btn-primary" id="*">*</a>
<br/>
<a class="btn btn-primary" id="7">7</a>
<a class="btn btn-primary" id="8">8</a>
<a class="btn btn-primary" id="9">9</a>
<a class="btn btn-primary" id="-">-</a>
<br/>
<a class="btn btn-primary" id="4">4</a>
<a class="btn btn-primary" id="5">5</a>
<a class="btn btn-primary" id="6">6</a>
<a class="btn btn-primary" id="+">+</a>
<br/>
<a class="btn btn-primary" id="1">1</a>
<a class="btn btn-primary" id="2">2</a>
<a class="btn btn-primary" id="3">3</a>
<a class="btn btn-primary" id=".">.</a>
<br/>
<a class ="btn btn-primary bigButton" id="0">0</a>
<a class ="btn btn-primary bigButton" id="total">=</a>
</div>
</body>
</html>