bxslider frame border issue

Question

Dies ist das erste Mal, dass ich eine Website mache, verzeihen Sie meine einfache Frage.Ich verwende bxslider als mein Banner auf meiner Website. Aber wie Sie sehen können, gibt es auf der linken Seite eine Übergrenze. Wie mache ich es wie die anderen Seiten?

der CSS-Stil ist als

/** 
* BxSlider v4.1.2 - Fully loaded, responsive content slider 
* http://bxslider.com 
* 
* Written by: Steven Wanderski, 2014 
* http://stevenwanderski.com 
* (while drinking Belgian ales and listening to jazz) 
* 
* CEO and founder of bxCreative, LTD 
* http://bxcreative.com 
*/ 


/** RESET AND LAYOUT 
===================================*/ 

.bx-wrapper { 
    position: relative; 
    margin: 0 auto 6px; 
    padding: 0; 
    *zoom: 1; 
} 

.bx-wrapper img { 
    width: 100%; 
    display: block; 
} 

/** THEME 
===================================*/ 

.bx-wrapper .bx-viewport { 
    -moz-box-shadow: 0 0 5px #ccc; 
    -webkit-box-shadow: 0 0 5px #ccc; 
    box-shadow: 0 0 5px #ccc; 
    border: 5px solid #fff; 
    left: -5px; 
    background: #fff; 

    /*fix other elements on the page moving (on Chrome)*/ 
    -webkit-transform: translatez(0); 
    -moz-transform: translatez(0); 
     -ms-transform: translatez(0); 
     -o-transform: translatez(0); 
     transform: translatez(0); 
} 

.bx-wrapper .bx-pager, 
.bx-wrapper .bx-controls-auto { 
    position: absolute; 
    bottom: -30px; 
    width: 100%; 
} 

/* LOADER */ 

.bx-wrapper .bx-loading { 
    min-height: 50px; 
    background: url(images/bx_loader.gif) center center no-repeat #fff; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
} 

/* PAGER */ 

.bx-wrapper .bx-pager { 
    text-align: center; 
    font-size: .85em; 
    font-family: Arial; 
    font-weight: bold; 
    color: #666; 
    padding-top: 20px; 
} 

.bx-wrapper .bx-pager .bx-pager-item, 
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 
    display: inline-block; 
    *zoom: 1; 
    *display: inline; 
} 

.bx-wrapper .bx-pager.bx-default-pager a { 
    background: #666; 
    text-indent: -9999px; 
    display: block; 
    width: 10px; 
    height: 10px; 
    margin: 0 5px; 
    outline: 0; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 

.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active { 
    background: #000; 
} 

/* DIRECTION CONTROLS (NEXT/PREV) */ 

.bx-wrapper .bx-prev { 
    left: 10px; 
    background: url(images/controls.png) no-repeat 0 -32px; 
} 

.bx-wrapper .bx-next { 
    right: 10px; 
    background: url(images/controls.png) no-repeat -43px -32px; 
} 

.bx-wrapper .bx-prev:hover { 
    background-position: 0 0; 
} 

.bx-wrapper .bx-next:hover { 
    background-position: -43px 0; 
} 

.bx-wrapper .bx-controls-direction a { 
    position: absolute; 
    top: 50%; 
    margin-top: -16px; 
    outline: 0; 
    width: 32px; 
    height: 32px; 
    text-indent: -9999px; 
    z-index: 9999; 
} 

.bx-wrapper .bx-controls-direction a.disabled { 
    display: none; 
} 

/* AUTO CONTROLS (START/STOP) */ 

.bx-wrapper .bx-controls-auto { 
    text-align: center; 
} 

.bx-wrapper .bx-controls-auto .bx-start { 
    display: block; 
    text-indent: -9999px; 
    width: 10px; 
    height: 11px; 
    outline: 0; 
    background: url(images/controls.png) -86px -11px no-repeat; 
    margin: 0 3px; 
} 

.bx-wrapper .bx-controls-auto .bx-start:hover, 
.bx-wrapper .bx-controls-auto .bx-start.active { 
    background-position: -86px 0; 
} 

.bx-wrapper .bx-controls-auto .bx-stop { 
    display: block; 
    text-indent: -9999px; 
    width: 9px; 
    height: 11px; 
    outline: 0; 
    background: url(images/controls.png) -86px -44px no-repeat; 
    margin: 0 3px; 
} 

.bx-wrapper .bx-controls-auto .bx-stop:hover, 
.bx-wrapper .bx-controls-auto .bx-stop.active { 
    background-position: -86px -33px; 
} 

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ 

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 
    text-align: left; 
    width: 80%; 
} 

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { 
    right: 0; 
    width: 35px; 
} 

/* IMAGE CAPTIONS */ 

.bx-wrapper .bx-caption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #666\9; 
    background: rgba(80, 80, 80, 0.75); 
    width: 100%; 
} 

.bx-wrapper .bx-caption span { 
    color: #fff; 
    font-family: Arial; 
    display: block; 
    font-size: .85em; 
    padding: 10px; 
} 

    enter code here 

Answer 1

folgen

margin: 0 auto; In diesem Regelsatz:

Von:

.bx-wrapper img { 
    width: 100%; 
    display: block; 
} 

An:

.bx-wrapper img { 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
}