ブートストラップ.container要素のマージンが不十分

Question

私は自分のアプリでブートストラップを使用しています。問題は.container要素が1360ピクセルの画面上に274ピクセルの左右のマージンを持っていることです。これは非常に巨大です。その結果、すべてが中央に絞られて見えます。この問題は一部のページには表示されませんが、他のページには表示されません。ここには.container要素のセクションのコードがあります。

<section id="rooms"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 images"> 
      <div class="img-container"> 
       <a href="#"> 
        <img src="img/rooms/family_one_bedroom.jpg" class="img-responsive"> 
        <div class="captions"> 
         <div class="well"> 
          <h3>Family One-Bedroom Executive Suite</h3> 
          <hr> 
          <p>On of the best options for families with children</p> 
         </div> 
        </div> 
       </a> 
      </div> 
     </div> 
     <div class="col-md-4 images"> 
      <a href="#"> 
       <img src="img/rooms/three_bedroom_grand_suite.jpg" class="img-responsive"> 
       <div class="captions"> 
        <div class="well"> 
         <h3>Three Bedroom Grand Suite</h3> 
         <hr> 
         <p>A huge option with amazing cityscape view</p> 
        </div> 
       </div> 
      </a> 
     </div> 
     <div class="col-md-4 images"> 
      <a href="#"> 
       <img src="img/rooms/family_one_bedroom.jpg" class="img-responsive"> 
       <div class="captions"> 
        <div class="well"> 
         <h3>Three Bedroom Grand Suite</h3> 
         <hr> 
         <p>Exquisite Interior And Modern Design</p> 
        </div> 
       </div> 
      </a> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6 images"> 
      <a href="#"> 
       <img src="img/rooms/one_bedroom_garden.jpg" class="img-responsive"> 
       <div class="captions"> 
        <div class="well"> 
         <h3>One Bedroom Room With Garden View</h3> 
         <hr> 
         <p>A budget option for backpackers</p> 
        </div> 
       </div> 
      </a> 
     </div> 
     <div class="col-md-6 images"> 
      <a href="#"> 
       <img src="img/rooms/delux.jpg" class="img-responsive"> 
       <div class="captions"> 
        <div class="well"> 
         <h3>Delux Room With Seaview</h3> 
         <hr> 
         <p>A luxury option with spectacular view of the coastline</p> 
        </div> 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 

私はすでに次のように0に.containerの余白を設定しようとしました：

.container { 
    margin: 0!important; 
} 

が、それはちょうど

に左と巨大な二重の余白に私に0を与えました

どのようにしてこの問題を解決し、両側に通常の余白を得ることができますか？

Answer 1

以下を試してください。

.container { 
    margin: 0 auto!important; 
    width:95% !important; 
}