Problem setting width for boot panel 3

Question

Could you take a look at This Demo and tell me why the panel title behaves like a demo (received margin on the left and right)? As I mentioned in the message header, I am trying to create a response panel, so that all elements aside righttoc-->panel panel-default-->, such as Forms, also behave as reactive.

<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 -->

thank

Answer 1

The problem basically is that you have nested columns without adding the required row element between them. There are negative fields in the lines that solve your problem.

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 -->