Здравствуйте! В браузерах не отображается часть стилей CSS (обертку видит, а вложенные дивы - нет)
Начал разработку на данном ноутбуке и увидел, что часть стилей CSS не видны в браузере. Когда смотрю через Inspect element, эти стили даже не добавляются. Отсутствуют любые стили для блока inputBlock в браузере (хотя в редакторе кода они есть). Так же само и не применяются стили и к верхнему блоку buttonBLock. Но к самим кнопкам они уже применяются почему - то.

.js_calculator_wrapper{
background-color: rgb(17, 112, 167);
width: 600px;
margin: 0 auto;
}
.buttonBlock{
background-color: rgb(23, 3, 46);
}
.buttonBlock button{
width: 120px;
height: 40px;
margin: 1em;
}
.inputBlock {
background-color: red;
text-align: center;
padding: 1em;
font-size: 2em;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content = 'IE=edge'>
<meta name='viewport' >
<title>CalculatorJS</title>
<link rel="stylesheet" href='./../CSS/styles.css'>
</head>
<body>
<div class='js_calculator_wrapper'>
<div class='buttonBlock'>
<button id='button_plus'>+</button>
<button id='button_minus'>-</button>
<button id='button_multiply'>*</button>
<button id='button_devide'>/</button>
</div>
<div class='inputBlock'>
<div class='first_input'>
<label>Number1</label>
<input type='number' id='first_input'/>
</div>
<div class='second_input'>
<label>Number2</label>
<input type='number' id='second_input'/>
</div>
</div>
<script src='./../JS//index.js'></script>
</body>
</html>