html - Bootstrap columns inside panel -

html - Bootstrap columns inside panel -

i trying create 3 columns within panel reason xs viewport not right. lastly column moves below row. can see on this jsfiddle.

any clues might doing wrong?

<div class="container"> <div class="row"> <div class="col-xs-12"> <div class="panel panel-default content-parent"> <div class="panel-header content-header"> <div class="row content-header-assets"> <div class="col-xs-1"> <i class="fa fa-angle-left content-header-actions"></i> </div> <div class="col-xs-10"> <h1 class="content-header-title text-center">some long text</h1> </div> <div class="col-xs-1"> <i class="fa fa-angle-right content-header-actions"></i> </div> </div> </div> <div class="panel-body"> <div class="content-body col-xs-12 col-sm-10 col-md-9 col-lg-7 block-center"> </div> </div> <div class="panel-footer content-footer text-center"> </div> </div> </div> </div> </div>

.col-*-1 8.33333333% of space provided, content (the .fa .fa-angle-right/left) doesn't fit since it's larger 8.333%. not best solution type of layout, can seek .col-xs-2 on left , right , .col-xs-8 on middle.

html css twitter-bootstrap twitter-bootstrap-3