不擴展在Bootstrap中的部分背景寬度

Question

我在Bootstrap中有一個頁面，頁面的某些部分將背景擴展到頁面的整個寬度，有些部分不是。

我的jsfiddle工作這麼多，一切都正確擴展：

<!--wrapper start--> 
<div class="wrapper" id="wrapper"> 
    <!--header--> 
    <header> 
     <div class="banner row" id="banner">   
      <div class="parallax text-center" style="background-image: url(http://mystery-quests.com/img/home-bkgd.jpg);"> 
       <div class="parallax-pattern-overlay"> 
        <div class="container text-center" style="height:580px;padding-top:130px;"> 
         <img id="site-title" class="wow fadeIn" wow-data-delay="0.0s" wow-data-duration="0.9s" src="img/mystery-quests-logo.png" alt="logo" />  
        </div> 
       </div> 
      </div> 
     </div> 
    </header> 

    <!--intro--> 
    <section> 
     <div id="intro"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <h2>Will you and your team escape in an hour?</h2> 
         <p>Mystery Quests Rooms are fun, interactive, live action, escape rooms for team building, social groups, families, friends, and gamers. Players work together using team-work, and use logic to solve puzzles, unlock locks and find clues to escape the room. Use your powers of observation and experiences to find your way out of the room. </p> 
        <div class="bookIt"><a href="https://bookeo.com/mystery-quests" class="btn btn-lg btn-warning" target="_blank">Book Now</a></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
    <section id="timeContact"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-6 col-sm-6 hours"> 
       <h2>Hours</h2> 
       <p><strong>Friday 4pm – 10pm<br />Saturday 2pm - 9pm</strong></p> 
      </div> 
      <div class="col-lg-6 col-md-6 col-sm-6 socialLinks"> 
       <h2>Keep Up With Us</h2> 
       <div class="row"> 
        <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 socialLink"> 
         <a href="#" title="Follow Us On Twitter"><img src="img/twitter-icon.png" alt="Follow Us On Twitter" /><br />Twitter</a> 
        </div>--> 
        <div class="col-lg-12 socialLink"> 
         <a href="https://www.facebook.com/mysteryquests" title="Follow Us On Facebook" target="_blank"><img src="img/facebook-icon.png" alt="Follow Us On Facebook" /><br />Facebook</a> 
        </div> 
        <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 socialLink"> 
         <a href="#" title="Follow Us On Instagram"><img src="img/instagram-icon.png" alt="Follow Us On Instagram" /><br />Instagram</a> 
        </div>--> 
        <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 socialLink"> 
         <a href="#" title="Follow Us On LinkedIn"><img src="img/linkedin-icon.png" alt="Follow Us On LinkedIn" /><br />LinkedIn</a> 
        </div>--> 
       </div> 
      </div> 
     </div> 
    </section> 


<!--footer--> 
<section class="footer" id="footer"> 
    <div class="row"> 
     <p class="text-center"> 
      <a href="#wrapper" class="gototop"><i class="fa fa-angle-double-up fa-2x"></i></a> 
     </p> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <p> 
         &copy; 2015 MysteryQuests 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

https://jsfiddle.net/steveeller/8kmnv2gd/

如果你看一下我的測試頁面，你會看到打開的圖片頭工作正常，那麼接下來的藍色款比標題部分短，留下約10px的空白（水平滾動）。小時和社交部分工作正常，但頁腳與藍色部分的功能相同： http://mystery-quests.com/index2.html

我知道這可能是我的一個疏忽，但我似乎無法找到問題，需要一個新的對的眼睛。

我希望這是有道理的。有任何想法嗎？

Answer 1

您的HTML層次結構存在一些問題。引導.row類的默認邊距運行不正常。

評論他們似乎可以修復您的網站，但用您的小提琴重現它有點棘手。

.row { 
    /* margin-right: -15px; */ 
    /* margin-left: -15px; */ 
}