1

Observe bem a tela;

inserir a descrição da imagem aqui

Não era para continuar assim, era para ele está responsivo, era para NOSSO SERVIÇO, IMOVEIS,CONHEÇA-NOS E os outros está um do lado do outro.

Minha pagina

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Condonager</title>
     <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">

    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>
<body>

<header>
   <div class="container">
      <img src="images/logo.png" width="220" height="100">
  </div>
</header>


<div id="servivos">
        <div class="row">
        <div class="col-md-4">
                    <article>
                <h2>NOSSO SERVIÇOS</h2>
                    <div class="text_servicos">
                    Todos os nossos serviços são realizados por profissionais qualificados, tendo por direcionamento os padrões de qualidade da Bernardes. Conheça a nossa página de Serviços e confira como podemos suprir às suas necessidades.
                    </div>

            </article>
            </div>
        </div>      

        <div class="row">
        <div class="col-md-4">
                <article>

                <h2>IMOVEIS</h2>
                <div class="text_servicos">
                    Todos os nossos serviços são realizados por profissionais qualificados, tendo por direcionamento os padrões de qualidade da Bernardes. Conheça a nossa página de Serviços e confira como podemos suprir às suas necessidades.
                </div>

            </article>
            </div>
        </div>  

<div class="row">
        <div class="col-md-4">

            <article>
                <h2>CONHEÇA-NOS</h2>
                <div class="text_servicos">
                    Todos os nossos serviços são realizados por profissionais qualificados, tendo por direcionamento os padrões de qualidade da Bernardes. Conheça a nossa página de Serviços e confira como podemos suprir às suas necessidades.
                </div>

            </article>
</div>
</div>
<<div class="row">
        <div class="col-md-4">

            <article>
                <h2>CONTATOS</h2>
                <div class="text_servicos">
                    Todos os nossos serviços são realizados por profissionais qualificados, tendo por direcionamento os padrões de qualidade da Bernardes. Conheça a nossa página de Serviços e confira como podemos suprir às suas necessidades.
                  </div>

            </article>
</div>
</div>

</div>

</body>
</html>

E meu arquivo CSS está assim;

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

header{
    border-bottom: 1px solid #ccc;
}

header img{
    margin-top: 12px;
}

/*
.container{
    width: 1200px; 

    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.lema{
    text-align: center;
    float: left;
}*/ 
/*
.lema > p {
    margin-top: 35px;
    margin-bottom: 30px;
    font-family: 'Pacifico', cursive;
    font-size: 25px;
}
*/
article{
    width: 35%;
    padding: 20px;


}


article > h2{

    text-align: left;/* titulo centralizado */
    line-height: 2.5;
}

article > .text_servicos{

    width: 220px;
    color:#A6A6A6;
}

#servicos{
    padding: 80px 0;
}

Eu não sei se errei no html ou se foi no CSS, e não consigo entrar a solução, preciso de ajuda.

1 Resposta 1

1

Isso está a acontecer porque está a inserir uma row para cada coluna, deve inserir as três colunas na mesma row. Faça assim:

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

header{
    border-bottom: 1px solid #ccc;
}

header img{
    margin-top: 12px;
}

/*
.container{
    width: 1200px; 

    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.lema{
    text-align: center;
    float: left;
}*/ 
/*
.lema > p {
    margin-top: 35px;
    margin-bottom: 30px;
    font-family: 'Pacifico', cursive;
    font-size: 25px;
}
*/
article{
    width: 35%;
    padding: 20px;


}


article > h2{

    text-align: left;/* titulo centralizado */
    line-height: 2.5;
}

article > .text_servicos{

    width: 220px;
    color:#A6A6A6;
}

#servicos{
    padding: 80px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="servivos">
<div class="container">


       <div class="row">
         <div class="col-sm-4">
            <article>
                <h2>NOSSO SERVIÇOS</h2>
                    <div class="text_servicos">
                    Todos os nossos serviços são realizados por profissionais qualificados, tendo por direcionamento os padrões de qualidade da Bernardes. Conheça a nossa página de Serviços e confira como podemos suprir às suas necessidades.
                    </div>
            </article>
          </div>
          <div class="col-sm-4">
            <article>
                <h2>IMOVEIS</h2>
                <div class="text_servicos">
                    Todos os nossos serviços são realizados por profissionais qualificados, tendo por direcionamento os padrões de qualidade da Bernardes. Conheça a nossa página de Serviços e confira como podemos suprir às suas necessidades.
                </div>
            </article>
          </div>
          <div class="col-sm-4">
            <article>
                <h2>CONHEÇA-NOS</h2>
                <div class="text_servicos">
                    Todos os nossos serviços são realizados por profissionais qualificados, tendo por direcionamento os padrões de qualidade da Bernardes. Conheça a nossa página de Serviços e confira como podemos suprir às suas necessidades.
                </div>
            </article>
        </div>
    </div>

 </div>

JSFIDDLE

4
  • funcionou, mas agora estou com outro problema, os quatro serviços não ficam alinhados em uma linha só, você acha que devo abrir outra postagem e colocar a minha dúvida aqui mesmo?
    – user10264
    12/06/2016 às 11:19
  • Ainda bem que ajudei, não sei bem o que quer dizer com isso. Neste exemplo os titulos estão alinhados @wladyband
    – Miguel
    12/06/2016 às 11:25
  • vou abrir outra postagem, muito obrigado pela ajuda :)
    – user10264
    12/06/2016 às 11:32
  • De nada @wladyband
    – Miguel
    12/06/2016 às 11:32

Você deve fazer log-in para responder a esta pergunta.