Bootstrap panel problems - panel header is not full width?

I have a page with 4 bootstrap bars that should be a basic walkthrough.

My requirements:

• The panels should be side-by-side for a large screen, but they should be responsive and the screen gets smaller and switches to portrait orientation.
• All panels must be the same height.
• Panels must have an appropriate title bar

The problem I'm currently running into is that I can solve the first two with the code below, but that leaves the panels with a weird title that doesn't cover the entire panel as shown below.

Here is the code I have that is causing this problem.

Html

<div class="container-fluid">
    <h3>Title!</h3>
    <hr />
    <div class="flexbox">

        <div id="box1" class="panel panel-default panel-wizard col-lg-3">
            <div class="panel-heading">
                <h4>Step 1</h4>
            </div>
            <div class="panel-body">
                <p> Blah. Blah....</p>
            </div>
        </div>

        <div id="box2" class="panel panel-default panel-wizard col-lg-3">
            <div class="panel-heading">
                <h4>Step 2</h4>
            </div>
            <div class="panel-body">
                 Blah. Blah....
            </div>
        </div>

        <div id="box3" class="panel panel-default panel-wizard col-lg-3">
            <div class="panel-heading">
                <h4>Step 3</h4>
            </div>
            <div class="panel-body">
                 Blah. Blah....                    
            </div>
        </div>

        <div id="box4" class="panel panel-default panel-wizard col-lg-3">
            <div class="panel-heading">
                <h4>Step 4</h4>
            </div>
            <div class="panel-body">
                 Blah. Blah....
            </div>
        </div>

    </div>
</div>

      

        
        
        
      

    

CSS

div.flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: wrap;
}

div.panel-wizard {
    flex: 1 1 auto;
}

      

        
        
        
      

    

JSFIDDLE

It seems that everything I am doing to fix the pane titles issue violates another of my requirements.