Styles, with divs, please answer for me?

Thank you guys sorry took me a while to respond i wasnt on my computer

Bootstrap version 4 and Cards can do that.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4.0, Cards Demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--Latest Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

html, body { height: 100% }

</style>

</head>

<body class="container">

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<div class="row row-eq-height">

<div class="col-sm-4">

<div class="card card-block h-100 justify-content-center ">

<h3 class="text-center">Vertically Centered Content</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</div>

</div>

<div class="col-sm-4">

<div class="card card-block h-100 justify-content-center">

<h3 class="text-center">Vertically Centered Content</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iusto veritatis minus, maiores odio.</p>

</div>

</div>

<div class="col-sm-4">

<div class="card card-block h-100 justify-content-center">

<h3 class="text-center">Vertically Centered Content</h3> <p>Cumque iusto veritatis minus, maiores odio.</p>

</div>

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--Latest Bootstap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Like this, using Flexbox:

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

<meta charset="UTF-8">

<style>

* {

box-sizing: border-box;

}

body {

font-family: arial, helvetica, sans-serif;

font-size: 14px;

line-height: 20px;

}

.services_wrapper {

width: 85%;

margin: 0 auto;

}

.services_wrapper h3 {

font-size: 30px;

margin: 0;

padding: 30px 0;

font-weight: 400;

text-align: center;

}

.services {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;   

}

article {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 29%;

border: 1px solid #ccc;

padding: 25px;

text-align: center;

}

@media screen and (max-width: 768px) {

article {

width: 100%;

margin: 0 0 40px 0;

}

}

article h2 {

margin: 0;

padding: 0;

font-size: 18px;

line-height: 22px;

}

article p {

margin: 0;

padding: 0;

font-size: 14px;

line-height: 22px;

color: #808080;

}

hr {

border-top: 2px solid #C7A75E;

width: 30%;

}

</style>

</head>

<body>

<section class="services_wrapper">

<h3>Our Services</h3>

<div class="services">

<article>

<h2>Market Research</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<!-- end article -->

<article>

<h2>Investment Management</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<!-- end article -->

<article>

<h2>Sales & Training</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<!-- end article -->

</div>

<!-- end services -->

</section>

<!-- end services_wrapper -->

</body>

</html>

Use css flexbox, view the code for this demo -

http://www.pziecina.com/Adobe/lightbox/lightbox.html