How to make text align under a box created in CSS

I was coding recently to learn more about html and CSS. I did not use any javascript as of now.

Right now, I am having a problem, since I am following a psd file, I need to make it into a html. I need to make a grey box and under that box, right in the middle underneath, I need to have a subheading and a paragraph, < p> < h4 >. See the picture below.

.boxes{ 
  width: 500px; 
       background-color: #e6e6e6; 
    display: block;
    height: 130px;
    width: 230px;
    color: white;
    text-align: center;
    padding: .10em; 
    margin: 2em;
    border: double #fff 20px; 
    border-bottom: none; 
} 

.non-icons { 
    margin: 15%;   
}

.box_text{ 
 color: #8c8b8b;

} 

<div class="container"> 
    <div class="four columns">
        <div class="boxes"> 
            <i class="fa fa-desktop fa-4x non-icons"></i> 
        </div>
     <h4 class="box_text"> Web Design</h4>
    </div>
    <div class="four columns">
        <div class="boxes"> 
            <i class="fa fa-shopping-basket fa-4x non-icons"></i>
        </div>
    </div>
    <div class="four columns">
        <div class="boxes"> 
            <i class="fa fa-signal fa-4x non-icons"></i>
        </div>
    </div>   
</div> <!-- End of Container --> 

This looks fine in normal view, but it breaks when the screen narrows.

Please Help..

Thanks, Devansh