Issue On Setting Width For Bootstrap 3 Responsive Panel

Question

Can you please take a look at This Demo and let me know why the heading of the panel behaves like the demo (got margin from Left and Right)? As I mentioned on the post title I am trying to create a Responsive Panel so all element in side of the righttoc-->panel panel-default--> like Forms also behave Responsive

<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-sx-12" id="lefttoc">Left</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-sx-12" id="maptoc">Center</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-sx-12" id="righttoc">
 <div class="panel panel-default col-lg-10 col-md-11 col-sm-2 col-sx-12 ">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
</div>
</div><!-- End of Row -->

Thanks

Answer 1

The problem is mostly that you've nested columns without adding the required row element in between. There are negative margins on rows that resolve your issue.

Try this instead:

<div class="row">
    <div class="col-sm-2 col-xs-12" id="lefttoc">Left</div>
    <div class="col-sm-7 col-xs-12" id="maptoc">Center</div>
    <div class="col-sm-3 col-xs-12" id="righttoc">
        <div class="row">
            <div class="col-lg-10 col-md-11 col-sm-2 col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h3 class="panel-title">Panel title</h3>    
                    </div>

                    <div class="panel-body">Panel content</div>
                </div>
            </div>
        </div><!-- End of Row -->
    </div>
</div><!-- End of Row -->