Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Estou com dúvida no curso de Dando os primeiros passos na web com HTML e CSS, no exercício do capítulo Elementos estruturais, imagens e tabelas.

O meu subtítulo "Informações Nutricionais" está descentralizado em relação aos outros subtítulos, pelo menos no meu navegador. Dei uma olhada no código e não encontrei o possível erro. Alguém poderia me ajudar?

Código:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" type="text/css" href="receita.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="http://google.com">Mousse de Maracujá</a></li>
                <li><a href="http://google.com">Torta de Chocolate</a></li>
                <li><a href="http://google.com">Geléia de Morango</a></li>
                <li><a href="http://google.com">Pavê de Limão</a></li>
            </ul>
        </nav>
        <section id="topo">        
            <h1 id="titulo">Receita - Mousse de Maracujá</h1>
            <figure>
                <img src="mousse.jpg"/>
                <figcaption>Mousse de Maracujá</figcaption>
            </figure>
        </section>    
        <h2>Ingredientes</h2>
        <ul>
            <li>1 lata de leite condensado</li>
            <li>1 lata de creme de leite</li>
            <li>1 lata de suco de maracujá(aproximadamente 4 maracujás)</li>
            <li>1 pacote de gelatina incolor</li>
            <li>Sementes de maracujá(para a decoração)</li>
        </ul>
        <h2>Modo de Preparo</h2>
        <ol>
            <li>Hidrate a gelatina na água, e depois dissolva em banho-maria</li>
            <li>Misture todos os ingredientes em um liquidificador(exceto as sementes de maracujá)</li>
            <li>Bata os ingredientes no liquidificador, em potência máxima, por 2 minutos</li>
            <li>Coloque o mousse em um recipiente e decore-o com as sementes de maracujá</li>
            <li>Coloque o mousse na geladeira, deixando em refrigeração por aproximadamente 4 horas</li>
            <li>Sirva</li>
        <ol>        
        <h2>Informações Nutricionais</h2>
        <table id="tb-nutrientes">
            <tr>
                <th>Nutrientes</th>
                <th>Porção(60g)</th>
                <th>%VD</th>
            </tr>
            <tr>
                <td>Valor Calórico(Kcal)</td>
                <td>225,37</td>
                <td>9,01</td>
            </tr>
            <tr>
                <td>Carboidratos(g)</td>
                <td>40,56</td>
                <td>10,82</td>
            </tr>
            <tr>
                <td>Proteínas(g)</td>
                <td>5,97</td>
                <td>8,53</td>
            </tr>
            <tr>
                <td>Gorduras Totais(g)</td>
                <td>4,36</td>
                <td>5,45</td>
            </tr>
            <tr>
                <td>Gorduras Saturadas(g)</td>
                <td>2,71</td>
                <td>10,83</td>
            </tr>
            <tr>
                <td>Colesterol(mg)</td>
                <td>16,68</td>
                <td>5,56</td>
            </tr>
            <tr>
                <td>Fibras Alimentares(g)</td>
                <td>0,30</td>
                <td>0,99</td>
            </tr>
            <tr>
                <td>Cálcio(mg)</td>
                <td>142,21</td>
                <td>17,78</td>
            </tr>
            <tr>
                <td>Ferro(mg)</td>
                <td>0,26</td>
                <td>1,89</td>
            </tr>
            </tr>
                <td>Sódio(mg)</td>
                <td>91,60</td>
                <td>3,82</td>
            </tr>                
        </table>
    </body>
</html>

CSS:

body{
    background-color:#F5F0DC;
    font-family:Helvetica, Arial, sans-serif;
    width:940px;
    margin-right:auto;
    margin-left:auto;
}

h2{
    background-color:#83A742;
    padding-top:5px;
    padding-left:5px;
    padding-bottom:5px;
    padding-right:5px;
    color:#FFFFFF;
}

#tb-nutrientes{
    width:50%;
    margin-right:auto;
    margin-left:auto;
    border:1px solid black;
}

#tb-nutrientes th{
    background-color:#FFFACD;
}

nav ul li{
    display:inline;
    margin-right:50px;
}

#topo{
    text-align:center;
}
2 respostas
solução!
<ol>
            <li>Hidrate a gelatina na água, e depois dissolva em banho-maria</li>
            <li>Misture todos os ingredientes em um liquidificador(exceto as sementes de maracujá)</li>
            <li>Bata os ingredientes no liquidificador, em potência máxima, por 2 minutos</li>
            <li>Coloque o mousse em um recipiente e decore-o com as sementes de maracujá</li>
            <li>Coloque o mousse na geladeira, deixando em refrigeração por aproximadamente 4 horas</li>
            <li>Sirva</li>
<ol>       
<h2>Informações Nutricionais</h2>

você esqueceu de fechar o

  1. </ol>       
    <h2>Informações Nutricionais</h2>

Valeu, Murilo, passou desapercebida a barra hahahaha

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software