Невозможно назначить правила CSS для элемента div

Question

Я пытаюсь добавить некоторые правила CSS в элемент div с помощью идентификатора SELECTOR, но это ничего не делает ..

Это результат моего кода:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

#header {
  background: #DEDEDE;
}

.flex-container {
  display: flex;
}

#header .flex-container {
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 1028px;
  margin: 0 auto;
  /* put the container on the middle */
}

#header .flex-container #logoPicture {
  width: 50%;
  border: solid;
  margin-top: 10px;
  margin-bottom: 10px;
}

#tal {
  border: solid;
}

#header .flex-container img {
  vertical-align: middle;
  border-radius: 20%;
}

#header .flex-container #logo {
  font-family: "Bauhaus 93";
  font-size: 350%;
  color: #E83303;
}

#header .flex-container ul {
  padding-left: 0;
  /* avoud the default padding to the left */
  font-family: "Franklin Gothic", Tahoma;
}

#header .flex-container ul li {
  display: inline-block;
  padding: 11px 25px;
  margin: 3px;
  background: #E83303;
  border-radius: 10px;
  font-weight: bold;
}

<div id="header">
  <div class="flex-container">
    <div id="logoPicture">
      <img src="https://i.imgur.com/cvO9xwB.png">
    </div>
    <div id="logo">RAPITEC</div>
    <div id="tal">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Shop</li>
        <li>Contact us</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Вместо:

#tal {
  border: solid;
}

Попробуйте:

#tal {
  border: 1px solid black;
}

Вы также можете написать это как:

#tal {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Когда вы помещаете ваш код в Codepen , я вижу границу (Chrome и Firefox на Mac). Похоже, что наши значения по умолчанию border-width и / или border-color отличаются. Лучше быть конкретным в этих двух вещах.