Eu tenho uma div q engloba tudo, nele eu centralizei tudo q tem dentro. Mas aí tenho uma li que fica dentro dessa div, mas quero q ela se alinhe a esquerda. Quando coloco text-align no css da classe dela, ela n se alinha.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculadora SV</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1 class="titulo-principal">Calculadora Soares Variedades</h1>
</header>
<main>
<div class="box-all">
<div class="box-input-conv">
<label for="caixa-valor" class="lbl-valor">Valor: </label>
<input type="number" name="caixa-valor" id="input-valor" value="">
</div>
<button onclick="calculaPrecos()" type="button" name="button" id="botao-calcular">Calcular</button>
<div class="box-resultado">
<ul>
<li>Valor Mín.: </li><span id="valmin" class="colore">R$ 0</span>
<li>Débito: <span id="debito" class="colore">R$ 0</span></li>
<li>Crédito à vista: <span id="credito1x" class="colore">R$ 0</span></li>
<li>Crédito à prazo: <span id="credito3x" class="colore">R$ 0</span></li>
</ul>
</div>
</div>
</main>
<footer>
</footer>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>CSS
body {
position: relative;
background-color: #00a8e3;
font-family: 'Roboto', sans-serif;
}
.box-all {
width: 480px;
height: 600px;
margin: 0 auto;
background: #fff;
border: 1px solid lightgray;
box-shadow: 0 0 14px black;
}
.box-input-conv {
display: flex;
}
.box-input-conv label {
font-size: 48px;
font-weight: bold;
margin-left: 15px;
margin-top: 20px;
width: 40%;
}
.box-input-conv input {
margin-left: 0px;
height: 50px;
margin-top: 20px;
margin-right: 20px;
}
button {
height: 75px;
margin-left: 25px;
font-size: 40px;
}
.box-resultado {
margin-top: 50px;
background: red;
}
//quero centralzar esse cabra de baixo
.box-resultado ul {
list-style-type: none;
text-align: left;
}
