i want to create a website with grids. for that i downloaded a template and started editing it. there was only 6 grid box. i added 3 more. but my added grids are joning with the first 3 grids. i have the following html code for creating grid :

```css
.heading h3 {
    font-size: 45px;
 text-align:center;
    text-transform: uppercase;
    color: #000;
}
.heading p {
    text-align: center;
    color: #000;
    line-height: 26px;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 50px;
}
.grid1 {
    text-align: center;
    background: #e0e0e0;
    background: #ffc107;
 background:#fff;
    padding: 25px 40px;
    -webkit-box-shadow: 0 0 40px #aaa;
    -moz-box-shadow: 0 0 40px #aaa;
    box-shadow: 0 0 40px #aaa;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
 -webkit-box-shadow:0px 1px 8px 0px rgba(158, 158, 158, 0.75);
 -moz-box-shadow:0px 1px 8px 0px rgba(158, 158, 158, 0.75);
 box-shadow:0px 1px 8px 0px rgba(158, 158, 158, 0.75);
}
.grid1:hover {
    background: #12ccc3;
}
.grid1 h4 {
    font-size: 20px;
    text-transform: uppercase;
    margin: 25px 0 20px;
    color: #ff9900;
    font-weight: 600;
}
.grid1 p {
    font-size: 14px;
    letter-spacing: .5px;
    color: #6b6b6b;
}
.services {
    padding: 5em 0;
}
.services .heading h3 ,.services .heading p{
    color: #fff;
}
.services-top-grids {
    margin-bottom: 30px;
}
.grid1 i.fa {
    font-size: 40px;
    color: #146eb4;
}
```

```html
<div class="services">
  <div class="container">
    <h3 class="heading-agileinfo" style="color:#e50000"><span>grid</span></h3>

    <div class="services-top-grids">
     <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-graduation-cap" aria-hidden="true"></i>
       <h4 style="color:#e50000">Expert Proffessionals</h4>
       <p>Our members have years of experience in Nurse entrance exam. </p>
      </div>
     </div>
    <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-graduation-cap" aria-hidden="true"></i>
       <h4 style="color:#e50000">Expert Proffessionals</h4>
       <p>Our members have years of experience in Nurse entrance exam. </p>
      </div>
     </div>
    <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-graduation-cap" aria-hidden="true"></i>
       <h4 style="color:#e50000">Expert Proffessionals</h4>
       <p>Our members have years of experience in Nurse entrance exam. </p>
      </div>
     </div>
    <div class="col-md-4">
     <div class="grid1">
      <i class="fa fa-graduation-cap" aria-hidden="true"></i>
      <h4 style="color:#e50000">Expert Proffessionals</h4>
      <p>Our members have years of experience in Nurse entrance exam. </p>
     </div>
    </div>
     <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-phone" aria-hidden="true"></i>
       <h4 style="color:#e50000">Great Support</h4>
       <p>We provide 24 hours online and offline support for our students. </p>
      </div>
     </div>
     <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-thumbs-up" aria-hidden="true"></i>
       <h4 style="color:#e50000">Proffessional Service</h4>
       <p>Our expert proffessionals provide you with complete proffessional service.</p>
      </div>
     </div>
     <div class="clearfix"></div>
    </div>
    <div class="services-bottom-grids">
     <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-star" aria-hidden="true"></i>
       <h4 style="color:#e50000">Highly Recomended</h4>
       <p>Our exams are recomended and appreciated by experts all over the world. </p>
      </div>
     </div>
     <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-user-plus" aria-hidden="true"></i>
       <h4 style="color:#e50000">Positive Reviews</h4>
       <p>Students who took our exams are completely satisfied with our service. </p>
      </div>
     </div>
     <div class="col-md-4">
      <div class="grid1">
       <i class="fa fa-user-md" aria-hidden="true"></i>
       <h4 style="color:#e50000">Job Vacancy</h4>
       <p>We also list the vacancy available in selected places. </p>
      </div>
     </div>

         </div>
```

when i run this code i get the result like in the following image

[![enter image description here](https://i.stack.imgur.com/qZqLC.png)](https://i.stack.imgur.com/qZqLC.png)
the bottom and the top grids are good,but the middle one is joining with the first one. how can i stop that. how can i space between them