Container

[André Gonçalves Fernandes 0]

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;

}

 

 

 

 

 

 

 

[Sherlock02 0]

Olá,

Não há necessidade de colocar <br> para quebra de linha.

Outro ponto, é que <p> é usado para parágrafos, mas os títulos devem usar as tags adequadas de titulos. h1, h2, etc.

Tentei não mexer muito no seu código original. 

Para alinhamento pode fazer com flex ou grid.

body {
   background-color: rgb(255, 80, 92);
  }

.container {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: white;
   background-color: rgb(255, 80, 92);
   width: 980px;
   margin: auto;
}
.caixas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
h1.title {
   text-transform: uppercase; /* transforma o titulo em letras maiusculas */
   font-size: 18px;
   text-align: center;
   line-height: 45px; /* altura da linha do titulo principal */
}
h2 {
   border: solid 1px white;
   font-size: 18px;
   line-height: 45px; /* altura da linha do titulo das caixas */
}
.box01,
.box02,
.box03,
.box04,
.box05,
.box06 {
   text-align: center;
   padding: 0 60px; /* diminua o espaçamento ou aumente conforme achar necessário */
}

 

<div class="container">
       
      <h1 class="title"> Veja mais sobre as nossas especialidades e como podemos ajudar você</h1>
      
    <div class="caixas">
      <div class="box01">
         <h2>UTI</h2>  
         <p>Suporte Avançado de Ambulâncias e Suportes Básicos</p>
      </div>   

      <div class="box02">
         <h2>Área Protegida</h2>
         <p>Proporcionando total segurança em áreas de risco.</p>
      </div>

      <div class="box03">
         <h2>Transferência</h2>
         <p>Intra-Hospitalar e Inter Hospitalar, Casa de repousos, Residenciais.</p>
      </div>
       
      <div class="box04">
         <h2>Posto Fixo</h2>
         <p>Profissionais especializados para atuar em situações de urgências e emergência (médicos, enfermeiros e socorridos).</p>
      </div>

      <div class="box05">
         <h2>Neonatal</h2>
         <p>Intra-Hospitalar e Inter Hospitalar, Casa de repousos, Residenciais.
      </div>

      <div class= "box06">
         <h2>Eventos</h2>
         <p>Cobertura de Eventos Religiosos Corridas de Rua, Peladas de Futebol, Casas Noturnas, Eventos Culturais, Lutas Muay Thai, Boxe, Jiu Jitsu, Vale Tudo</p>
      </div> 


    </div><!-- final caixas -->
    
   </div><!-- final container -->