html - 无法为div元素分配CSS规则

我尝试使用ID SELECTOR向div元素添加一些CSS规则
但是它什么也没做。

这是我的代码的结果：

* {
  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>

最佳答案

代替：

#tal {
  border: solid;
}

尝试：

#tal {
  border: 1px solid black;
}

您也可以这样写：

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

将您的代码放入Codepen时，我看到一个边框（Mac上为Chrome和Firefox）。看来我们的默认border-width和/或border-color值是不同的。最好具体说明这两件事。