How to reduce the accordion width (resize) and align to right like a nav or sidebar?
<p>I want to align the accordion to left side and like the size of menu. How can I do it? I have a sidemenu and beneath that I need an accordion. But the accordion length is not relating to the sidemenu and nearly double the size of menu bar.</p>

<p>And here is my code:</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="row"&gt;
        &lt;div class="col-sm-4 col-md-3 sidebar"&gt;
    &lt;div class="mini-submenu"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="list-group"&gt;

        &lt;a href="#" class="list-group-item"&gt;
            &lt;i class="fa fa-comment-o"&gt;&lt;/i&gt; About
        &lt;/a&gt;
        &lt;a href="#" class="list-group-item"&gt;
            &lt;i class="fa fa-search"&gt;&lt;/i&gt; Help
        &lt;/a&gt;
        &lt;a href="#" class="list-group-item"&gt;
            &lt;i class="fa fa-user"&gt;&lt;/i&gt; Chat
        &lt;/a&gt;

        &lt;a href="#" class="list-group-item"&gt;
            &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; Feedback
        &lt;/a&gt;



    &lt;/div&gt;        
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
  &lt;div class="panel-group" id="accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse1"&gt;Collapsible Group 1&lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapse1" class="panel-collapse collapse in"&gt;
        &lt;div class="panel-body"&gt;Text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse2"&gt;Collapsible Group 2&lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapse2" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;Text 2&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt; 
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>