bootstrap panel not align correctly

Question

I need to create a well aligned column in bootstrap 3, three panes in the first row, four in the secode row

If you goto the jsfiddle http://jsfiddle.net/oghenez/xTc7a/33/embedded/result/ you will see that the fist panel in the secode line is not aligned to the left as that in the first line.

here is my code

<div class="row">

        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"> Today's Schedule</h3>
                </div>
                <div class="panel-body">

                </div> 
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"> Information Log</h3>
                    </div>
                    <div class="panel-body">

                    </div> 
                </div>
            </div>  
        </div>
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"> Office Tasks</h3>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>        

</div>

<div class="row">

<div class="col-md-3">
</div>

<div class="col-md-3">
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title"> Office Tasks</h3>
    </div>
    <div class="panel-body">

    </div>
</div>
</div> 
<div class="col-md-3">
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title"> Office Tasks</h3>
    </div>
    <div class="panel-body">

    </div>
</div>
</div> 
<div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"> Office Tasks</h3>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>        

</div>

how do i fix this?

Answer 1

If you get rid of row inside your <div class="col-md-6"> everything will line up.

See Bootply.