Border not being added to container div
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I can’t figure out why but I can’t seem to add a border to my container div, which I made to center everything. Not in a CSS file, and not with the style attribute, I just wanted a solid 5px grey border but like I said, I can’t add it. So if some1 can tell me what is wrong here I’d appreciate it! Leaving both html and CSS code below with comment on where I’m having the issue at for better understanding.
#titulo{
font-size: 20px;
color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
margin:auto;
}
font-size: 20px;
color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
margin:auto;
}
#reset{
background-color: black;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 195px;
margin-right: 100px;
width: 100px;
height: 25px;
}
#container{
margin: auto;
width:fit-content;
height: fit-content;
margin-top:50px;
border: 5px solid grey; //BORDER NOT BEING ADDED
}
.parametro{
text-align: center;
font-size: 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
}
.butao{
background-color: grey;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 150px;
height: 50px;
border:grey;
margin: 5px;;
}
#risco{
margin:auto;
border: 5px solid grey;
display:block;
}
.separador{
width: 100%;
color:grey;
}
.block{
display:inline-block;
margin: auto;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Risco Cardiovascular</title>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”risco.css”>
</head>
<body>
<div id=”container” style=”border: 10px grey;”> //BORDER NOT BEING ADDED
<h1 id=”titulo”>Cálculo do Risco Cardiovascular</h1><br>
<button id=”reset”>Reiniciar</button>
<h2 class=”parametro”>Idade</h2>
<hr class=”separador”></hl>
<div class=”block”>
<button class=”butao”><30</button>
<button class=”butao”><60</button>
<button class=”butao”>≥60</button>
</div>
<h2 class=”parametro”>IMC</h2>
<hr class=”separador”></hl>
<div class=”block”>
<button class=”butao”><25</button>
<button class=”butao”><40</button>
<button class=”butao”>≥40</button>
</div>
<h2 class=”parametro”>Stress</h2>
<hr class=”separador”></hl>
<div class=”block”>
<button class=”butao”><Nível 1</button>
<button class=”butao”><Nível 2</button>
<button class=”butao”>≥Nível 3</button>
</div><br>
<img id=”risco” src=”risco.jpg”>
</div>
</body>
</html>
أضف إجابة