Having problems implementing a jQuery photo slideshow

I'm trying to implement a jquery image s开发者_开发百科lideshow into my website, and since I didn't create it myself, I'm having trouble identifying all of the css attributes. The three problems I am having are:

1) when the images scroll, there is a parent container that stretches outside of the width of the slideshow panel. 2) I've adjusted the margins and padding of every attribute, but I can't get the black padding around the image to disappear. 3) I can't figure out how to adjust the space between the images.

Here you can see the black padding around the image:

And here you can see both the margin between images and the image floating outside the container:

The bar with the magnifying glass is part of my IDE.

So here is the HTML running the slider:

        <div class="slider">
            <div id="header">
                <div class="wrap">
                    <div id="slide-holder">
                        <div id="slide-runner">
                            <a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
                            <a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
                            <a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
                            <a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
                            <a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
                            <a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
                            <a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a> 
                            <div id="slide-controls">
                                 <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
                                 <p id="slide-desc" class="text"></p>
                                 <p id="slide-nav"></p>
                            </div>
                        </div>  
                    </div>
                    <script type="text/javascript">
                            if(!window.slider) var slider={};slider.data=[
                                    {"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},
                                    {"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},
                                    {"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},
                                    {"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},
                                    {"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},
                                    {"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},
                                    {"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}
                                ];
                    </script>
                </div>
            </div>
        </div>

And here is the CSS:

* {
    margin : 0;
    padding : 0;
}

html {
    height : 100%;
}

div.slider {
    height : 100%;
    color : #a4a4a4;
    cursor : default;
    font-size : 11px;
    line-height : 16px;
    text-align : center;
    background-position : 50% 0;
    background-repeat : no-repeat;
    font-family : Tahoma, sans-serif;
    background-color: black;
}



a:link, a:visited {
    color : #fff;
    text-decoration : none;
}
a img {
    width: 92%;
}
div.wrap {
    text-align : left;
}
div#top div#nav {
    float : left;
    clear : both;
    width : 993px;
    height : 52px;
}
div#top div#nav ul {
    float : left;
    width : 700px;
    height : 52px;
    list-style-type : none;
}
div#nav ul li {
    float : left;
    height : 52px;
}
div#nav ul li a {
    border : 0;
    height : 52px;
    display : block;
    line-height : 52px;
    text-indent : -9999px;
}
div#header {
    margin : -1px 0 0;
}
div#video-header {
    height : 683px;
    margin : -1px 0 0;
}
div#header div.wrap {
    /* image height */
    height : 300px;
    background : url(images/header-bg.png) no-repeat 50% 0;
}
div#header div#slide-holder {
    /* slider container */
    z-index : 40;
    width : 915px;
    height : 299px;
    position : absolute;
}
div#header div#slide-holder div#slide-runner {
    top : 9px;
    left : 9px;
    width : 973px;
    height : 278px;
    overflow : hidden;
    position : absolute;
}
div#header div#slide-holder img {
    margin : 0;
    display : none;
    position : absolute;
}
div#header div#slide-holder div#slide-controls {
    left : 0;
    top: 0;
    width : inherit;
    height : 46px;
    width: 896px;
    display : none;
    position : absolute;
    background-color: rgba(0,0,0, .5);
}
div#header div#slide-holder div#slide-controls p.text {
    float : left;
    color : #fff;
    display : inline;
    font-size : 10px;
    line-height : 16px;
    margin-top: 13px;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
    /* page numbers */
    float : right;
    height : 24px;
    display : inline;
    margin : 11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
    float : left;
    width : 24px;
    height : 24px;
    display : inline;
    font-size : 11px;
    margin : 0 5px 0 0;
    line-height : 24px;
    font-weight : bold;
    text-align : center;
    text-decoration : none;
    background-position : 0 0;
    background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
    background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
    background-image : url(images/slide-nav.png);
}
div#nav ul li a {
    background : url(images/nav-bg.png) no-repeat;
}

I know it's probably hard to see just by looking at the markup, but does anyone with a keen eye for CSS see the problem?

The problem is in scripts.js file where you position pictures 1000 apart. If pictures where 1000px wide, there wouldn’t be any space between them. You have to change picture width or the code in scripts.js (around line 86&113).

You have width: 92%; in there which would give you a border. Change that to 100% and use overflow:hidden elsewhere to handle the scrollbar problem.