.panel-body span{
display: block;
letter-spacing:1px;
margin: 2px 0;
width:fit-content;
}
.innerPanel{
float: left;
width: 25%;
word-wrap: break-word;
height: 150px;
}
.panelBody{
padding: 0px;
}
.panel-heading{
text-align: center;
}
.panel{
margin-bottom: 0;
}
<div class="panel panelWrap panel-primary">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body panelBody">
<div class="panel innerPanel panel-info" >
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
</div>
</div>
<div class="panel innerPanel panel-info">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="panel innerPanel panel-info">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
</div>
</div>
<div class="panel innerPanel panel-info">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
</div>
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body panelBody">
<div class="panel innerPanel panel-info" >
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
</div>
</div>
<div class="panel innerPanel panel-info">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="panel innerPanel panel-info">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
</div>
</div>
<div class="panel innerPanel panel-info">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<span></span>
</div>
</div>
</div>
</div> invalid text-align:center
want to know how to center accurately