在Chrome中出現Bootstrap結果

Question

我的網站有一部分出現問題，但問題僅出現在Chrome中（並未嘗試過Firefox）。在Safari中，「關於」div（如下所示）顯示正確的比例很好，但在Chrome中，p元素顯示的方式太低，大部分位於瀏覽器的左邊緣並且無法讀取，而#about_bg部分太方便，行爲太差。有任何想法嗎？

鏈接是在這裏：http://www.smoakvoiceover.com/#about

<!-- ABOUT --> 
<div id="about" class="container-fluid"> 
    <div class="wrapper"> 
    <div class="row"> 
     <div id="about_bg" class="col-sm-3 col-sm-push-9"> 
     <img id="question_glyph" class="center-block" src="img/question_glyph.png" alt="about" /> 
     <h3 id="question_glyph_alt" alt="about">ABOUT.</h3> 
     </div> 
     <div class="col-sm-9 col-sm-pull-3 about_container"> 
     <p class="about_text"> 
      Outside of being "the voice," Bradley Smoak has had a variety of jobs throughout his career, most notably being an internationally acclaimed <a class="discreet" target="_blank" href="http://www.bradleysmoak.com">operatic soloist</a> featured at some of the top opera companies in the world. 
      <br /> 
      <br /> 
      Other jobs have included bartender, boat renter, poker dealer, steakhouse cook, steakhouse waiter, steakhouse customer, website developer, illustrator, and computer game tester. From these incredibly diverse experiences, he brings a unique perspective to his voice acting and the ability to create a variety of specific, relatable characters that bring your copy to life. 
      <br /> 
      <br /> 
      Originally from North Carolina, Bradley now makes his home in the wonderful Chicagoland area with his gorgeous wife and daughter, who put up with his "crazy voices" every day. 
     </p> 
     </div> 
    </div> 
    <div class="row"> 
     <div id="about_arrow" class="text-center"> 
     <a href="#services"><span class="text-center glyphicon glyphicon-circle-arrow-down"></span></a> 
     </div> 
    </div> 
    </div> 
</div> 

而這裏的相應.scss代碼（通過SASS編譯後）：

#about { 
    background: url('../img/about_bg.jpg'); 
    background-size: cover !important; 
    background-attachment: fixed; 
    margin-bottom: -65px !important; 
    z-index: 2 !important; 
    position:relative; 
    top:-57px !important; 
} 
#about_bg { 
    background-color: rgba(0, 0, 0, 0.825); 
} 
#question_glyph { 
    width: 50%; 
    padding:220px 0px 270px 0px; 
} 
#question_glyph_alt { display: none; } 
.about_container { 
    margin: 250px auto; 
    padding: 30px 35px; 
    max-width:740px; 
    text-align: left; 
} 
p.about_text { 
    color:#000 !important; 
    font-size: 15px; 
} 
#about_arrow > a { 
    color: $white; 
    width:40px; 
    margin:0px auto; 
    position:relative; 
    bottom:100px; 
    &:hover { color: $steel; } 
} 

感謝您抽空看看！

Answer 1

向Bootstrap列的左側和右側添加填充和邊距將導致列超出包裝的最大寬度（如果列等於12）並且內容將包裝。