Cannot assign css rules for div element - html

Question

I try to add some css rules to a div element using an ID SELECTOR
But it does nothing..
This is the result of my code:
* {
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

Instead of:
#tal {
border: solid;
}
Try:
#tal {
border: 1px solid black;
}
You could also write this like:
#tal {
border-width: 1px;
border-style: solid;
border-color: black;
}
When putting your code into Codepen, I am seeing a border (Chrome and Firefox on Mac). It appears that our default border-width and/or border-color values are different. It's best to be specific about those two things.