Здравствуйте! В браузерах не отображается часть стилей CSS (обертку видит, а вложенные дивы - нет)

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

https://i.stack.imgur.com/h0Cis.png

.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>
    


Ответы (0 шт):