I cannot Put background-color and Outline

Question

I am developing a web application and I have the following problems:

1. I can’t fill in the blank space above the title "Sort Search" using the background-color applied to it.

2. I can’t get a line outline: 1px solid #E0E0DA; and apply property padding between the categories in the list, in the .ordena.

Here follows the code and a screenshot from the same below:

.conteudo_ordenar{
    border:1px solid #E0E0DA;
    border-top: 3px solid #00008B;
    border-bottom: 3px solid #00008B;
    height: 200px;
}
.titulo_ordenar {
    background-color: #00008B;
    color:White;
    text-align: center;
}
.orderna {
    outline: 1px solid #E0E0DA;
    padding: 12px;
}

<div class="col-sm-3">
    <div class="conteudo_ordenar">
        <h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
        <p class="ordena"><span class="caret"></span> Marca</p>
        <p class="ordena"><span class="caret"></span> Tamanho</p>
        <p class="ordena"><span class="caret"></span> Cor</p>
        <p class="ordena"><span class="caret"></span> Faixa De Preço</p>
    </div>
</div>

Answer 1

1. You’re not "filling" the space above the title because of Default Browser Styles.

2. You cannot apply styles to list items because the selector is typographically wrong instead of ordena is orderna in the CSS code.

.conteudo_ordenar {
    border:1px solid #E0E0DA;
    border-top: 3px solid #00008B;
    border-bottom: 3px solid #00008B;
    height: 200px;
    overflow: auto; /* isto para evitar o conteúdo transborde o "container", por causa da altura limite de "200px height" definido acima */
}
.titulo_ordenar {
    background-color: #00008B;
    color:White;
    text-align: center;
    margin: 0; /* Aplica um reset à margem automática do título atribuída pelo Navegador */
}
.ordena {
    outline: 1px solid #E0E0DA;
    padding: 12px;
}

<div class="col-sm-3">
    <div class="conteudo_ordenar">
        <h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
        <p class="ordena"><span class="caret"></span> Marca</p>
        <p class="ordena"><span class="caret"></span> Tamanho</p>
        <p class="ordena"><span class="caret"></span> Cor</p>
        <p class="ordena"><span class="caret"></span> Faixa De Preço</p>
    </div>
</div>