title: how to remove left and right margin in jquery ui accordion?
body: <p>I am using JQuery UI accordion to represent my data. But I want to remove left and right margins of accordions to use whole page for data representation. I managed it with <code>margin-left and margin-right</code> but not getting perfect margins.</p>
  
  <p>My code is here:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="acc_main" class="acc"&gt;
   &lt;h3&gt;Main Section&lt;/h3&gt;
  
  &lt;div id="acc_camp" class="acc"&gt;
       &lt;h3&gt;Camp 1&lt;/h3&gt;
  
      &lt;div class="acc"&gt;
           &lt;h3&gt;Section 1&lt;/h3&gt;
  
          &lt;div&gt;1st section&lt;/div&gt;
           &lt;h3&gt;Section 2&lt;/h3&gt;
  
          &lt;div&gt;2nd section&lt;/div&gt;
           &lt;h3&gt;Section 3&lt;/h3&gt;
  
          &lt;div&gt;List : 1&lt;/div&gt;
      &lt;/div&gt;
       &lt;h3&gt;Camp 2&lt;/h3&gt;
  
      &lt;div class="acc"&gt;
           &lt;h3&gt;Section 1&lt;/h3&gt;
  
          &lt;div&gt;1st section&lt;/div&gt;
           &lt;h3&gt;Section 2&lt;/h3&gt;
  
          &lt;div&gt;2nd section&lt;/div&gt;
           &lt;h3&gt;Section 3&lt;/h3&gt;
  
          &lt;div&gt;List : 2&lt;/div&gt;
      &lt;/div&gt;
       &lt;h3&gt;Camp 3&lt;/h3&gt;
  
      &lt;div class="acc"&gt;
           &lt;h3&gt;Section 1&lt;/h3&gt;
  
          &lt;div&gt;1st section&lt;/div&gt;
           &lt;h3&gt;Section 2&lt;/h3&gt;
  
          &lt;div&gt;2nd section&lt;/div&gt;
           &lt;h3&gt;Section 3&lt;/h3&gt;
  
          &lt;div&gt;List : 2&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>h3 {
  text-align: center;
  }
  .ui-accordion {
  margin-left: 0px;
  }
  .ui-accordion-header {
  height: 15px;
  }
  .ui-accordion .ui-accordion-header {
  margin-left: -20px;
  margin-right: -25px;
  }
  .ui-accordion .ui-accordion {
  margin-left: -20px;
  margin-right: -25px;
  }
  .ui-accordion .ui-accordion .ui-accordion {
  margin-left: -20px;
  margin-right: -25px;
  }
  .ui-accordion .ui-accordion .ui-accordion-header {
  margin-left: -20px;
  margin-right: -25px;
  }
  .ui-accordion-content {
  margin-left: -20px;
  margin-right: -25px;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(document).ready(function () {
  var icons = {
      header: "ui-icon-circle-plus",
      activeHeader: "ui-icon-circle-minus"
  };
  $(".acc").accordion({
      active: false,
      collapsible: true,
      heightStyle: "content",
      icons: icons
  });
  });
  </code></pre>
  
  <p>JSFiddle page:</p>
  
  <p><a href="http://jsfiddle.net/ankitlamba009/4JEFG/" rel="nofollow">Fiddle</a></p>