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 `margin-left and margin-right` but not getting perfect margins.

My code is here:

HTML:

```
<div id="acc_main" class="acc">
 <h3>Main Section</h3>

<div id="acc_camp" class="acc">
     <h3>Camp 1</h3>

    <div class="acc">
         <h3>Section 1</h3>

        <div>1st section</div>
         <h3>Section 2</h3>

        <div>2nd section</div>
         <h3>Section 3</h3>

        <div>List : 1</div>
    </div>
     <h3>Camp 2</h3>

    <div class="acc">
         <h3>Section 1</h3>

        <div>1st section</div>
         <h3>Section 2</h3>

        <div>2nd section</div>
         <h3>Section 3</h3>

        <div>List : 2</div>
    </div>
     <h3>Camp 3</h3>

    <div class="acc">
         <h3>Section 1</h3>

        <div>1st section</div>
         <h3>Section 2</h3>

        <div>2nd section</div>
         <h3>Section 3</h3>

        <div>List : 2</div>
    </div>
</div>

```

CSS:

```
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;
}

```

JQuery:

```
$(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
});
});

```

JSFiddle page:

[Fiddle](http://jsfiddle.net/ankitlamba009/4JEFG/)