Border not being added to container div-CodePudding

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;
}

#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 >Idade</h2>
            <hr ></hl>
            <div >
                <button >&lt;30</button>
                <button >&lt;60</button>
                <button >&ge;60</button>
            </div>
            <h2 >IMC</h2>
            <hr ></hl>
            <div >
                <button >&lt;25</button>
                <button >&lt;40</button>
                <button >&ge;40</button>
            </div>
            <h2 >Stress</h2>
            <hr ></hl>
            <div >
                <button >&lt;Nível 1</button>
                <button >&lt;Nível 2</button>
                <button >&ge;Nível 3</button>
            </div><br>
            <img id="risco" src="risco.jpg">
        </div>
    </body>
</html>

CodePudding user response：

You Added style inline and in the CSS file, now it's worked because I removed the inline style.

#titulo{
    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"> //BORDER NOT BEING ADDED
            <h1 id="titulo">Cálculo do Risco Cardiovascular</h1><br>
            <button id="reset">Reiniciar</button>
            <h2 >Idade</h2>
            <hr ></hl>
            <div >
                <button >&lt;30</button>
                <button >&lt;60</button>
                <button >&ge;60</button>
            </div>
            <h2 >IMC</h2>
            <hr ></hl>
            <div >
                <button >&lt;25</button>
                <button >&lt;40</button>
                <button >&ge;40</button>
            </div>
            <h2 >Stress</h2>
            <hr ></hl>
            <div >
                <button >&lt;Nível 1</button>
                <button >&lt;Nível 2</button>
                <button >&ge;Nível 3</button>
            </div><br>
            <img id="risco" src="risco.jpg">
        </div>
    </body>
    </html>