CSS width not centering the image
I am using wordpress as my CMS, and have used a theme of my choice. The theme shows a slider (carousel) on the home page, but takes up too much space. I tried to edit the width and height to be 80%, but the UI gets screwed. The slider does not center, or the frame with the left right arrows come closer. The image gets smashed. I need to get the css right for this.
I tried the following
1. modified width and height to 80%
2. reduced the px values, messed it up further
Below I have relevant css and html portions of the code.
<div id="slides">
<div class="slides_container slide" style="overflow: hidden; position: relative; display: block;">
<div class="slides_control" style="position: relative; width: 2736px; height: 480px; left: -912px;"><div style="position: absolute; top: 0px; left: 912px; z-index: 5;">
<a href=""><img src="http://localhost/taxeeta/wp-content/uploads/2013/01/116.png?1358343444279" alt=""></a>
</div>
<div style="position: absolute; top: 0px; left: 912px; z-index: 0; display: none;">
<a href=""><img src="http://localhost/taxeeta/wp-content/uploads/2013/01/215.png" alt=""></a>
</div>
</div>
</div>
CSS:
#slides {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}
.slides_container {
width: 912px;
margin: 0;
padding: 0;
}
.slides_control {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}