如何使滑块滑到页面的100％

Question

I've been playing with this code all morning trying to make this slider go 100% of the browser. I am using swiper slider if that helps? I have attached my code below for reference.

If you preview the code in full width view the slider seems to be trapped in the original image size and not going to the edge of the window like the rest of the stories. Any suggestions would be appericated.

 var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', paginationClickable: true, initialSlide: 0, slidesPerView: 1, spaceBetween: 20, centeredSlides: true, autoplay: 2000, autoplayDisableOnInteraction: false }); 

 /* Making Thing Pretty ---------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } .opencanvascontainer { margin: 0 auto; max-width: 1140px; } [class*=bit-] { float: left;/*padding:.3em;*/ position:relative; } /* OBSW Grid System ---------------------------- */ .box { text-align: center; border: solid 1px black; color: #000; font-size: 12px; font-family: 'proxima_nova_rgregular', sans-serif; padding: 15px 10px 15px 10px; } .bit-1 { width: 100%; } .bit-2 { width: 50%; padding: 20px; } .bit-3 { width: 33.33333%; padding: 20px; } .bit-4 { width: 25%; } .bit-4-tabs { width: 25%; padding:10px; } .bit-5 { width: 20%; } .bit-5-tabs { width: 20%; padding:10px; } .bit-6 { width: 16.66667%; padding: .3em; } .bit-7 { width: 14.28571%; } .bit-8 { width: 12.5%; } .bit-9 { width: 11.11111%; } .bit-10 { width: 10%; } .bit-11 { width: 9.09091%; } .bit-12 { width: 8.33333%; } .bit-25 { width: 25%; } .bit-40 { width: 40%; } .bit-60 { width: 60%; } .bit-75 { width: 75%; } .bit-35 { width: 35%; padding: 20px; } .bit-65 { width: 65%; padding: 20px; } /* Laptop */ @media (min-width:50em) and (max-width:68.75em) { .bit-7 { width: 100%; } .bit-10, .bit-12, .bit-4, .bit-8 { width: 50%; } } /* Tablet */ @media (min-width:30em) and (max-width:50em) { .bit-10, .bit-12, .bit-4, .bit-6, .bit-8 { width: 50%; } .bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 { width: 100%; } } /* Mobile */ @media (max-width:30em) { .bit-1, .bit-10, .bit-11, .bit-12, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6, .bit-7, .bit-8, .bit-9, .bit-35, .bit-65 { width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } .bit-5-tabs, .bit-4-tabs {width:50%;padding:5px;} .storytext {margin-left:15px;} .storytextcenter {margin-left:0px;} .bottomlinespacing {margin-bottom:20px;} .subtitle { font-size:20px !important; margin-top: 1em !important; } .fancy span { margin-top:1.5em !important;} } /* ------------------------- End OBSW Grid System */ /* Full Width Wrapper ---------------------------- */ .fullwidthwrapper { width: 100%; padding-top: 150px; } @media (max-width:991px) { .fullwidthwrapper { padding-top: 5px; } } @media (max-width:907px) { .fullwidthwrapper { padding-top: 5px; line-height: 42px; } } /* ------------------------- End Full Width Wrapper */ /* Header Slider ---------------------------- */ .hpfullwidth-top { background-color: #fff; background-repeat: repeat; padding-top: 150px; } @media (max-width:991px) { .hpfullwidth-top { padding-top: 5px; } } .imageholder { max-width: 1500px; margin: 0 auto; } /* ------------------------- End Header Slider */ /* Image Hover ---------------------------- */ .fade { opacity: 1; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; } fade:hover { opacity: 0.5; } /* ------------------------- End Image Hover */ .storytext { margin-top:15px; line-height:20px; } .storytextcenter { margin-top:15px; line-height:20px; } .firstline { font-family:proxima_nova_rgbold, serif; font-size:20px; color:#000; } .secondline { font-family:'proxima_nova_rgregular', serif; font-size:14px; color:#000; } .thirdline { font-family:proxima_nova_rgbold, serif; font-size:14px; color:#000; border-bottom: solid 2px #000000; display: inline; padding-bottom: 2px; } .bottomlinespacing { margin-bottom:0px; } .subtitle { margin: 1.5em 0 .3em 0; font-size:35px; letter-spacing:5px; } .fancy { line-height: 0.5; text-align: center; } .fancy span { display: inline-block; position: relative; } .fancy span:before, .fancy span:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid black; top: 0; width: 600px; } .fancy span:before { right: 100%; margin-right: 15px; } .fancy span:after { left: 100%; margin-left: 15px; } .tabbedcontainer { width: 100%; margin: 0 auto; } ul.tabs { margin-top: 1em; padding: 0px; list-style: none; text-align:center; } ul.tabs li { background: none; color: #000; display: inline-block; padding: 10px 15px; cursor: pointer; } ul.tabs li.current { background: #fff; color: #000; text-decoration:underline; font-family:proxima_nova_rgbold, serif; font-weight:bold; } .tab-content { display: none; background: #fff; } .tab-content.current { display: inherit; } .swiper-container { width: 100%; height: auto; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px); -ms-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; position: relative; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform, height; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform, height; } /* Pagination Styles */ .swiper-pagination { position: relative; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0; margin-top: 5px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullet { width: 10px; height: 10px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; margin: 5px; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet { background: #fff; } .swiper-pagination-bullet-active { opacity: 1; background: black; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: black; opacity: 1; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.xx/js/swiper.jquery.min.js"></script> <!-- Start Body Content --> <div class="fullwidthwrapper"> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- SLIDE 1 --> <div class="swiper-slide" data-swiper-autoplay="2000"> <picture> <source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> <source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" /> <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div> <!-- END --> <!-- SLIDE 2 --> <div class="swiper-slide" data-swiper-autoplay="2000"> <picture> <source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> <source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" /> <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div> <!-- END --> <!-- SLIDE 2 --> <div class="swiper-slide" data-swiper-autoplay="2000"> <picture> <source media="(min-width: 50em)" srcset="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> <source media="(min-width: 0em)" srcset="https://s28.postimg.org/j82irvijx/mobileslider.png" width="100%" /> <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="https://s28.postimg.org/o5g3czkj1/desktopslider.jpg" width="100%" /> </picture></div> <!-- END --> </div> <div class="heightissue" style="height:18px; width:100%;">&nbsp;</div> </div> <div class="swiper-pagination">&nbsp;</div> <div class="bit-1"> <div class="bit-3"> <img src="https://s17.postimg.org/lfnazyidb/nike1.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP RUNNING</span><br> <span class="secondline">Starting at $59.99</span> <div class="bottomlinespacing"><span class="thirdline">SHOP NOW</span></div> </div> </div> <div class="bit-3"> <img src="https://s17.postimg.org/b4ay7aqnz/nike2.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP TRAINING</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-3"> <img src="https://s17.postimg.org/qoibxu0sf/nike3.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> </div> <div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;"> <div class="imageholder"> <div class="bit-2"> <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%"> <div class="storytext"> <span class="firstline">WOMEN'S ATHLETIC</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-2"> <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%"> <div class="storytext"> <span class="firstline">MEN'S ATHLETIC</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> </div> </div> <div class="bit-1" style="margin-bottom:40px;"> <p class="subtitle fancy"><span>ATHLETIC<font style="font-family:proxima_nova_rgbold, serif;">REPORT</font>2017</span></p> <div class="tabbedcontainer"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Women's</li> <li class="tab-link" data-tab="tab-2">Men's</li> <li class="tab-link" data-tab="tab-3">Girls'</li> <li class="tab-link" data-tab="tab-4">Boys'</li> </ul> <div id="tab-1" class="tab-content current"> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/9es7hqvdz/boots_boys.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> </div> <div id="tab-2" class="tab-content"> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s29.postimg.org/z0on6ad3b/boot_chukka.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> </div> <div id="tab-3" class="tab-content"> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/reqe1ur2t/boots_chelsea.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> </div> <div id="tab-4" class="tab-content"> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-4-tabs"> <img src="https://s24.postimg.org/lcirbd2mt/boot_casual.jpg" width="100%"> <div class="storytext"> <span class="firstline">SHOP SNEAKERS</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> </div> </div> </div> <div class="bit-1" style="background-color:#ebebeb; padding-top:20px; padding-bottom:20px;"> <div class="imageholder"> <div class="bit-2"> <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%"> <div class="storytext"> <span class="firstline">WOMEN'S ATHLETIC</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> <div class="bit-2"> <img src="http://kingofwallpapers.com/square/square-009.jpg" width="100%"> <div class="storytext"> <span class="firstline">MEN'S ATHLETIC</span><br> <span class="secondline">Starting at $59.99</span><br> <span class="thirdline">SHOP NOW</span> </div> </div> </div> </div> </div> <!-- End Body Content --> 

Thanks!

Answer 1

从“ bit-3”类中删除填充。