Can't center inline-block element in parent

Question

So i'm having trouble entering the element with the middle class. So the container box-block-head-yellow had a width of 100% so that it can span any container, the class middle is using display inline-block so that the container wraps around it's content you can see the markup below.

<!-- Markup for container -->
<div class="box">
 <div class="box-block-head-yellow">
  <div class="box-title-block middle">
   <h1 class="box-title">Latest projects</h1>
  </div>
 </div>
</div>

So the issue i'm having is the middle container isn't centering in the middle. With the following styles on each element.

Parent element

Child element

Result of element not being entered horizontally

Answer 1

Adding the following CSS to your box-block-head-yellow class can solve the center alignment issue.

.box-block-head-yellow {
  width: 100%;
  text-align: center;
}
.middle {
  display: inline-block;
}