Dúvida no Exercicio

Front-end
#1

Estou estudando o PDF da Caelum de Front-End e estou apanhando para fazer um site, não tô conseguindo arrumar o site da forma certa. identar texto pre-formatado em 4 espaços

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="Loja_Mirror_Fashion.css">
    </head>
    <body>
        
        
        <div class="container destaque">
            
            <section class="busca">
                <h2>Busca</h2>
                
                <form>
                    <input type="search">
                    <input type="image" src="img/busca.jpg" width="16" height="16">
                </form>
            </section><!--fim de busca-->
                
              <section class="menu-departamentos">
               <h2>Departamentos</h2>
               
                <nav>
                    <ul>
                     <li>
                      <a href="#">Blusas e Camisetas></a></li>
                      <ul>
                          <li><a href="#">Manga curta</a></li>
                          <li><a href="#">Manga cumprida</a></li>
                          <li><a herf="#">Camisa social</a></li>
                          <li><a herf="#">Camisa casual</a></li>
                      </ul>
                      </li>
                    
                      <li><a href="#">Calças</a></li>
                      <li><a href="#">Saias</a></li>
                      <li><a href="#">Vestidos</a></li>
                      <li><a href="#">Sapatos</a></li>
                      <li><a href="#">Bolsas e Carteiras</a></li>
                      <li><a href="#">Acessórios></a></li>
                       
                    </ul> 
                </nav>
              </section><!--fim .menu-departamentos-->
            
            
            <img src="img/destaque-home.jpg" alt="Promoção: Big City Night" width=740 height="480">
            </div><!--fim.container.destaque-->
            
            <div class="container paineis">
                <!--os paines de novidades e mais vendidos entrarão aqui dentro-->
                <section class="painel mais-novidades">
                    <h2> Mais Novidades </h2>
                    <ol>
                         <li>
                            <a href="produto.html">
                                <figure>
                                    <img src="img/miniaturas1.jpg" width="290" height="370">
                                    <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                                    
                                </figure>
                            </a>
                         </li> 
  
                        <!--primeiro produto-->
                      
                        <li>
                          <a href="produto.html">
                              <figure>
                                  <img src="img/foto1-verde.jpg" width="290" height="370">
                                  <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                              </figure>
                         </li>
                         
                        <li> 
                                <img src="img/foto1-rosa.jpg" width="290" height="370">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </li>
                       
                        <li>
                                <img src="img/foto1-azul.jpg" width="290" height="370">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </li>
                      
                         <li>
                                <img src="img/foto1-verde.jpg" width="290" height="370">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </li> 
                     
                        <li>
                                <img src="img/foto2-azul.jpg" width="290" height="370">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
                        </li>
                     
                        <li>
                                <img src="img/foto2-verde.jpg" width="290" height="370">
                                <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> 
                        </li>
                         
                         
                       <!--coloque mais produto aqui!-->
                      
                    </ol>
                </section>
            </div>  
            
            
                <div class="container">
                <img src="img/logo-rodape.jpg" alt="Logo MIrror Fashion">
                <section>
                <ul class="social">
                    <li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
                    <li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
                    <li><a gref="http://plus.google.com/mirrorfashion">Google+</a></li>
                </ul>
                </section>
                </div>
            
            
            
            
    </body>
</html>
#2

@Bruno_People

Quando você diz “identar texto pre-formatado em 4 espaços” está se referindo a tag “pre”?

Se for isso, elas estão obsoletas e no HTML5 o atributo width não é mas aceito. Se tu quiser indentar algum texto usa a propriedade word-spacing do css.

Espero ter ajudado, abraço.

#3

Não!! estou apenas tentando entender é que como faço para Organizar os containers direitinho.

#4

Compartilha o que você tem feito aí junto com o css para que possa ajudar melhor, porque só olhando o HTML não dá para saber.

#5 
.busca,
.menu-departamentos{
    background-color: #dcdcdc;
    font-weight: bold;
    text-transform: uppercase;
    
    margin-right: 10px;
    width: 230px;
}


.busca h2,
.busca form,
.menu-departamentos h2{

margin: 10px;
}

.menu-departamentos li{
    background-color: white;
    margin-bottom: 1px;
    padding: 5px 10px;
}

.menu-departamentos a {
    color: #333333;
    text-decoration: none;
}

.busca input{
    vertical-align: middle;
}

.busca input[type=search]{
width: 170px;
}

.busca,
.menu-departamentos{
    float:left;
}

.menu-departamentos{
    clear:left;
}

.destaque{
    margin-top: 10px;
}

.menu-departamentos{
    margin-top: 10px;
    padding-bottom: 10px;
}

.painel{
    margin: 10px 0;
    padding: 10px;
    width: 445px;
}

.novidades{
    float: left;
}

.mais-vendidos{
    float:right;
}


.painel li{
    display: inline-block;
    vertical-align: top;
    width: 140px;
    
    margin: 2px;
    padding-bottom: 10px;
}


.painel h2{
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    
    margin-bottom: 10px;
    
}

.painel a{
    color: #333;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.novidades{
    background-color: #f5dcdc;
}

.mais-vendidos{
    background-color: #dcdcf5;
}

footer{
    background-image: url(../img/fundo-rodape.png);
}

.social a{
    /*tamanho da imagem*/
    height: 32px;
    width: 32px;
   
    /*image replacement*/
    display:block;
    text-indent:-999px;
}

.social a[href*="facebook.com"]{
    backgraound-image: url(../img/facebook.jpg);
}


.social a[href*="twitter.com"]{
    background-image: url(../img/twitter.jpg);
}

.social a[href*="plus.google.com"]{
    background-image:url(../img/google.jpg);
}

footer{
    padding: 20px 0;
}

footer .container{
    position: relative;
}

.social{
    position: absolute;
    top: 12px;
    right: 0;
}


.social li{
    float: left;
    margin-left: 25px;
}

.menu-departamentos li ul{
    display:nome;
}

.menu-departamentos li:hover ul{
    display:block;
}

.menu-departamentos ul ul li{
    background-color: #dcdcdc;
}

.menu-departamentos li li a:before{
    content: '-';
}

.menu-departamentos li li a:before{
    content: '\272A';
    padding-right: 3px;
}

.painel h2:before{
    content: '\276';
    padding-right: 5px;
    opacity: 0.4;
    
}

.painel {
    border-radius: 4px;
    box-shadow: 1px 1px 4px #999;
}

.painel h2{
    text-shadow: 3px 3px 2px #FFF;
}

.busca{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.painel h2{
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

.novidades{
    background-color: #f5dcdc;
    background: linear-gradient(#f5dcdc,#bebef4);
}

.painel li:hover{
    box-shadow: 0 0 5px #333;
    transition: box-shadow 0.7s;
}

.painel li:hover{
    transform: scale(1.2);
}

.painel li:hover{
    transform:scale(1.2) rotate(-5deg);
}

.painel li:hover{
    background-color: rgba(255,255,255,0.8);
    box-shadow: 0 0 5px #333;
    trasistion: 0.7s;
}

.painel li:hover{
    transform: scale(1.2);
}

.painel li:hover{
    transform:scale (1.2) rotate(-5deg);
}

.painel li:nth-child(2n):hover{
    transform: scale(1.2) rotate(5deg);
}

.painel li{
    transition: 0.7s;
}

.painel li:hover{
    transition: 0.7s ease-in;
}

.painel li{
    transition: 0.7s ease-out;
}
#6

E aí!!! o que está errado???