Prezados, 
 
Boa Noite 
 
A Imagem02 anexa é situação que eu preciso chegar
 
A imagem01 anexa é o caminho que estou percorrendo. O conteúdo é o mesmo. Acredito que estou no caminho certo, mas não estou conseguindo deixar as três caixas alinhadas na parte de cima e as três caixas alinhadas na parte de baixo.
 
Abaixo o código que eu apliquei em HTML e CSS referente a imagem 01
 
Se alguém puder me ajudar agradeço,
 
 
HTML
<div class="container">
       
      <p class="title">VEJA MAIS SOBRE AS NOSSAS ESPECIALIDADES E</br>COMO PODEMOS AJUDAR VOCÊ</p>
 
      <div class="box01">
         <p class=p01>UTI</p>  
         <p>Suporte Avançado de</br>Ambulâncias e Suportes</br>Básicos</p>
      </div>  
      
      <div class="box02">
         <p>Área Protegida</p>
         <p>Proporcionando total segurança</br>em áreas de risco.</p>
      </div>
      
      <div class="box03">
         <p>Transferência</p>
         <p>Intra-Hospitalar e Inter<br></br>Hospitalar, Casa de repousos, Residenciais.</p>
      </div>
       
      <div class="box04">
         <p>Posto Fixo</p>
         <p>Profissionais especializados para<br></br>atuar em situações de urgências<br></br>e emergência (médicos, enfermeiros e socorridos).</p>
      </div>
      
      <div class="box05">
         <p>Neonatal</p>
         <p>Intra-Hospitalar e Inter Hospitalar, Casa de repousos, Residenciais.
      </div>
      
         
      <div class= "box06">
         <p>Eventos</p>
         <p>Cobertura de Eventos Religiosos Corridas de Rua</br>Peladas de Futebol, Casas Noturnas, Eventos Culturais</br>Lutas Muay Thai, Boxe, Jiu Jitsu, Vale Tudo</p>
      </div> 
   
   </div>  
 
CSS
 
.container{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 15px ;
    color:white;
    background-color: rgb(255, 80, 92);
    margin: 0px -8px 0px -8px;
    padding: 60px 20px 60px 20px;
}
.title{
    font-family:Arial, Helvetica, sans-serif ;
    font-size: 18px;
    text-align: center;
    margin: -50px 0px 0px 0px;
    padding: 20px 20px 60px 20px; 
 
}
.box01{
   display:inline-block;
   text-align:center;
   
}
.p01{
    border: solid 1px white;
    height: 30px;
    width: 100px;
    margin: 6px -3px 6px 34px;
    padding: 7px 2px 7px 63px;
    
}
.box02{
    display: inline-block;
    text-align: center;
}
.box03{
    display:inline-block;
    text-align:center;
}
.box04{
    display:inline-block;
    text-align:center;
}
 
.box05{
    display:inline-block;
    text-align:center;
}
 
.box06{
    display:inline-block;
    text-align:center;
}
 
 
 
 
 
 
 

Bom dia galera, tenho uma lista de imagem e ao selecionar uma imagem no site ela é aberta dentro de uma div, porém fica um espaço como mostrado na imagem, gostaria de saber como resolver isso, atualmente meu html e meu css estão assim: 
    <ul>                     
                        <div style="width: auto">
                        </div>
                        <li><img width="70" src="images/J1.PNg" no repeat; onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                        <li><img width="70" src="images/J3.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                        <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                        <li><img width="70" src="images/J3.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                        <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                        <li><img width="70" src="images/J1.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                        <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                        <li><img width="70" src="images/J3.pNg" onclick="clickImagem(this.src)" alt=""/>Pulseira Teste
                        <H6> Pulseira Teste.</H6></li>
                    </ul>                    
                </form>
            </div>
            <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)" style="background:#fff">
 
E CSS:
#conteudo{
    width:55%;
    height:60%;
    float:left;
    background-color:#fff;    
    display: initial;
    margin: auto;
    z-index: 1;
    overflow: hidden;
    .columns {
    }

Olá usei os parâmetros, padding e display para separar elementos na minha pagina, o problema é que em devices apple estes parâmetros não funcionam, e no android eles funcionam exatamente como deveriam.
 
 
 
</section>
      
        <div style="display:block; padding: 10px;">
        
           <p><font color="#d7d7d7">Texto que fica entre as section</font></p>
       
        </div>
<section> 

Bom dia
Comprei o livro Construindo sites com CSS e (X)HTML, e ao tentar acessar www.livrocss.com.br sai a mensagem que não é possível acessar o site, afim de verificar as técnicas na construção.... Gostaria de saber se o site não está mais disponível ou se mudou de endereço.
Obrigado
Luiz Carlos